@codxse/mitosis-js 1.4.0
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/LICENSE +21 -0
- package/README.md +192 -0
- package/dist/core/editor.d.ts +13 -0
- package/dist/core/editor.d.ts.map +1 -0
- package/dist/core/editor.js +50 -0
- package/dist/core/editor.js.map +1 -0
- package/dist/core/types.d.ts +19 -0
- package/dist/core/types.d.ts.map +1 -0
- package/dist/core/types.js +2 -0
- package/dist/core/types.js.map +1 -0
- package/dist/highlight/markdown.d.ts +4 -0
- package/dist/highlight/markdown.d.ts.map +1 -0
- package/dist/highlight/markdown.js +10 -0
- package/dist/highlight/markdown.js.map +1 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -0
- package/dist/parser/markdown.d.ts +6 -0
- package/dist/parser/markdown.d.ts.map +1 -0
- package/dist/parser/markdown.js +41 -0
- package/dist/parser/markdown.js.map +1 -0
- package/dist/view/editor-pane.d.ts +23 -0
- package/dist/view/editor-pane.d.ts.map +1 -0
- package/dist/view/editor-pane.js +163 -0
- package/dist/view/editor-pane.js.map +1 -0
- package/dist/view/preview-pane.d.ts +19 -0
- package/dist/view/preview-pane.d.ts.map +1 -0
- package/dist/view/preview-pane.js +121 -0
- package/dist/view/preview-pane.js.map +1 -0
- package/dist/view/two-panel-layout.d.ts +31 -0
- package/dist/view/two-panel-layout.d.ts.map +1 -0
- package/dist/view/two-panel-layout.js +152 -0
- package/dist/view/two-panel-layout.js.map +1 -0
- package/package.json +51 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
# @codxse/mitosis-js
|
|
2
|
+
|
|
3
|
+
A framework-agnostic markdown editor with a split-view interface, optimized for technical blogs and documentation.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Split-View Editor**: Write markdown on the left, see live HTML preview on the right
|
|
8
|
+
- **Syntax Highlighting**: Color-coded markdown syntax in the editor for better readability
|
|
9
|
+
- **Keyboard Shortcuts**: Quick formatting with Cmd/Ctrl key combinations
|
|
10
|
+
- **Scroll Sync**: Panels stay synchronized as you scroll
|
|
11
|
+
- **Resizable Panels**: Drag the divider to adjust panel sizes
|
|
12
|
+
- **Framework Agnostic**: Works with React, Vue, Svelte, or vanilla JavaScript
|
|
13
|
+
- **Lightweight**: Simple markdown-to-HTML conversion using [`marked`](https://github.com/markedjs/marked)
|
|
14
|
+
|
|
15
|
+
## Syntax Highlighting
|
|
16
|
+
|
|
17
|
+
Code blocks in the preview can be syntax-highlighted using Prism.js. Provide your configured Prism instance via the `prism` option:
|
|
18
|
+
|
|
19
|
+
````jsx
|
|
20
|
+
import { createEditor } from '@codxse/mitosis-js'
|
|
21
|
+
import Prism from 'prismjs'
|
|
22
|
+
import 'prismjs/components/prism-javascript'
|
|
23
|
+
import 'prismjs/components/prism-typescript'
|
|
24
|
+
import 'prismjs/themes/prism-tomorrow.css'
|
|
25
|
+
|
|
26
|
+
const editor = createEditor({
|
|
27
|
+
container: document.getElementById('editor'),
|
|
28
|
+
content: '# Hello\n```js\nconst x = 1;\n```',
|
|
29
|
+
prism: Prism, // Optional - without this, code blocks render without highlighting
|
|
30
|
+
})
|
|
31
|
+
````
|
|
32
|
+
|
|
33
|
+
**Note:** You must install Prism.js and the language components you need separately. Prism is not bundled with this package.
|
|
34
|
+
|
|
35
|
+
## Keyboard Shortcuts
|
|
36
|
+
|
|
37
|
+
| Shortcut | Action |
|
|
38
|
+
| ------------------ | --------------------------- |
|
|
39
|
+
| `Cmd/Ctrl+B` | Wrap in `**bold**` |
|
|
40
|
+
| `Cmd/Ctrl+I` | Wrap in `*italic*` |
|
|
41
|
+
| `Cmd/Ctrl+K` | Insert `[link](url)` |
|
|
42
|
+
| `Cmd/Ctrl+E` | Wrap in `` `inline code` `` |
|
|
43
|
+
| `Cmd/Ctrl+Shift+S` | Wrap in `~~strikethrough~~` |
|
|
44
|
+
| `Tab` | Insert 2 spaces (indent) |
|
|
45
|
+
|
|
46
|
+
## Installation
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
# Core package
|
|
50
|
+
pnpm add @codxse/mitosis-js
|
|
51
|
+
|
|
52
|
+
# Optional: for syntax highlighting in code blocks
|
|
53
|
+
pnpm add prismjs
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Usage
|
|
57
|
+
|
|
58
|
+
### Vanilla JavaScript
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<!DOCTYPE html>
|
|
62
|
+
<html>
|
|
63
|
+
<head>
|
|
64
|
+
<link rel="stylesheet" href="node_modules/@codxse/mitosis-js/dist/styles/editor.css" />
|
|
65
|
+
</head>
|
|
66
|
+
<body>
|
|
67
|
+
<div id="editor"></div>
|
|
68
|
+
|
|
69
|
+
<script type="module">
|
|
70
|
+
import { createEditor } from '@codxse/mitosis-js'
|
|
71
|
+
|
|
72
|
+
const editor = createEditor({
|
|
73
|
+
container: document.getElementById('editor'),
|
|
74
|
+
content: '# Hello World',
|
|
75
|
+
})
|
|
76
|
+
|
|
77
|
+
// Get content
|
|
78
|
+
const markdown = editor.getMarkdown()
|
|
79
|
+
const html = editor.getHTML()
|
|
80
|
+
const { markdown, html } = editor.getBoth()
|
|
81
|
+
|
|
82
|
+
// Set content
|
|
83
|
+
editor.setMarkdown('# New content')
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### React
|
|
90
|
+
|
|
91
|
+
```jsx
|
|
92
|
+
import { createEditor } from '@codxse/mitosis-js'
|
|
93
|
+
import { useEffect, useRef } from 'react'
|
|
94
|
+
|
|
95
|
+
function Editor() {
|
|
96
|
+
const containerRef = useRef(null)
|
|
97
|
+
const editorRef = useRef(null)
|
|
98
|
+
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
if (containerRef.current) {
|
|
101
|
+
editorRef.current = createEditor({
|
|
102
|
+
container: containerRef.current,
|
|
103
|
+
content: '# Hello World',
|
|
104
|
+
})
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return () => editorRef.current?.destroy()
|
|
108
|
+
}, [])
|
|
109
|
+
|
|
110
|
+
return <div ref={containerRef} style={{ height: '500px' }} />
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Vue
|
|
115
|
+
|
|
116
|
+
```vue
|
|
117
|
+
<template>
|
|
118
|
+
<div ref="editorContainer" style="height: 500px"></div>
|
|
119
|
+
</template>
|
|
120
|
+
|
|
121
|
+
<script setup>
|
|
122
|
+
import { ref, onMounted, onUnmounted } from 'vue'
|
|
123
|
+
import { createEditor } from '@codxse/mitosis-js'
|
|
124
|
+
|
|
125
|
+
const editorContainer = ref(null)
|
|
126
|
+
let editor = null
|
|
127
|
+
|
|
128
|
+
onMounted(() => {
|
|
129
|
+
if (editorContainer.value) {
|
|
130
|
+
editor = createEditor({
|
|
131
|
+
container: editorContainer.value,
|
|
132
|
+
content: '# Hello World',
|
|
133
|
+
})
|
|
134
|
+
}
|
|
135
|
+
})
|
|
136
|
+
|
|
137
|
+
onUnmounted(() => {
|
|
138
|
+
editor?.destroy()
|
|
139
|
+
})
|
|
140
|
+
</script>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## API
|
|
144
|
+
|
|
145
|
+
### `createEditor(options: EditorOptions): Editor`
|
|
146
|
+
|
|
147
|
+
Creates a new markdown editor instance.
|
|
148
|
+
|
|
149
|
+
**Options:**
|
|
150
|
+
|
|
151
|
+
- `container: HTMLElement` - The DOM element to mount the editor into
|
|
152
|
+
- `content?: string` - Initial markdown content
|
|
153
|
+
- `prism?: object` - Optional Prism.js instance for syntax highlighting code blocks
|
|
154
|
+
|
|
155
|
+
### Methods
|
|
156
|
+
|
|
157
|
+
#### `getMarkdown(): string`
|
|
158
|
+
|
|
159
|
+
Returns the current markdown content.
|
|
160
|
+
|
|
161
|
+
#### `getHTML(): string`
|
|
162
|
+
|
|
163
|
+
Returns the current content as HTML.
|
|
164
|
+
|
|
165
|
+
#### `getBoth(): { markdown: string; html: string }`
|
|
166
|
+
|
|
167
|
+
Returns both markdown and HTML representations.
|
|
168
|
+
|
|
169
|
+
#### `setMarkdown(content: string): void`
|
|
170
|
+
|
|
171
|
+
Sets the editor content to the provided markdown string.
|
|
172
|
+
|
|
173
|
+
#### `destroy(): void`
|
|
174
|
+
|
|
175
|
+
Cleans up the editor and removes all event listeners.
|
|
176
|
+
|
|
177
|
+
## Development
|
|
178
|
+
|
|
179
|
+
```bash
|
|
180
|
+
# Install dependencies
|
|
181
|
+
pnpm install
|
|
182
|
+
|
|
183
|
+
# Run demo
|
|
184
|
+
pnpm run demo
|
|
185
|
+
|
|
186
|
+
# Build
|
|
187
|
+
pnpm run build
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## License
|
|
191
|
+
|
|
192
|
+
MIT
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { EditorOptions, EditorOutput } from './types.js';
|
|
2
|
+
export declare class Editor {
|
|
3
|
+
private layout;
|
|
4
|
+
private container;
|
|
5
|
+
private options;
|
|
6
|
+
constructor(options: EditorOptions);
|
|
7
|
+
getMarkdown(): string;
|
|
8
|
+
getHTML(): string;
|
|
9
|
+
getBoth(): EditorOutput;
|
|
10
|
+
setMarkdown(content: string): void;
|
|
11
|
+
destroy(): void;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=editor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/core/editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAI7D,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,OAAO,CAAe;gBAElB,OAAO,EAAE,aAAa;IA2BlC,WAAW,IAAI,MAAM;IAIrB,OAAO,IAAI,MAAM;IAIjB,OAAO,IAAI,YAAY;IAQvB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIlC,OAAO,IAAI,IAAI;CAIhB"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { TwoPanelLayout } from '../view/two-panel-layout.js';
|
|
2
|
+
import { parseMarkdownToHTML } from '../parser/markdown.js';
|
|
3
|
+
export class Editor {
|
|
4
|
+
layout;
|
|
5
|
+
container;
|
|
6
|
+
options;
|
|
7
|
+
constructor(options) {
|
|
8
|
+
this.options = options;
|
|
9
|
+
this.container = options.container;
|
|
10
|
+
const wrapper = document.createElement('div');
|
|
11
|
+
wrapper.className = 'mitosis-editor-wrapper';
|
|
12
|
+
Object.assign(wrapper.style, {
|
|
13
|
+
width: '100%',
|
|
14
|
+
height: '600px',
|
|
15
|
+
position: 'relative',
|
|
16
|
+
});
|
|
17
|
+
const layoutConfig = {
|
|
18
|
+
container: wrapper,
|
|
19
|
+
};
|
|
20
|
+
if (options.content !== undefined) {
|
|
21
|
+
layoutConfig.initialContent = options.content;
|
|
22
|
+
}
|
|
23
|
+
if (options.prism !== undefined) {
|
|
24
|
+
layoutConfig.prism = options.prism;
|
|
25
|
+
}
|
|
26
|
+
this.layout = new TwoPanelLayout(layoutConfig);
|
|
27
|
+
this.container.appendChild(wrapper);
|
|
28
|
+
}
|
|
29
|
+
getMarkdown() {
|
|
30
|
+
return this.layout.getMarkdown();
|
|
31
|
+
}
|
|
32
|
+
getHTML() {
|
|
33
|
+
return parseMarkdownToHTML(this.layout.getMarkdown(), this.options.prism);
|
|
34
|
+
}
|
|
35
|
+
getBoth() {
|
|
36
|
+
const markdown = this.getMarkdown();
|
|
37
|
+
return {
|
|
38
|
+
markdown,
|
|
39
|
+
html: parseMarkdownToHTML(markdown, this.options.prism),
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
setMarkdown(content) {
|
|
43
|
+
this.layout.setContent(content);
|
|
44
|
+
}
|
|
45
|
+
destroy() {
|
|
46
|
+
this.layout.destroy();
|
|
47
|
+
this.container.innerHTML = '';
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../src/core/editor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,OAAO,MAAM;IACT,MAAM,CAAgB;IACtB,SAAS,CAAa;IACtB,OAAO,CAAe;IAE9B,YAAY,OAAsB;QAChC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;QAElC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC7C,OAAO,CAAC,SAAS,GAAG,wBAAwB,CAAA;QAC5C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;YAC3B,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,UAAU;SACrB,CAAC,CAAA;QAEF,MAAM,YAAY,GAAwE;YACxF,SAAS,EAAE,OAAO;SACnB,CAAA;QACD,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAClC,YAAY,CAAC,cAAc,GAAG,OAAO,CAAC,OAAO,CAAA;QAC/C,CAAC;QACD,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAChC,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QACpC,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAA;QAE9C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;IACrC,CAAC;IAED,WAAW;QACT,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAA;IAClC,CAAC;IAED,OAAO;QACL,OAAO,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC3E,CAAC;IAED,OAAO;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,OAAO;YACL,QAAQ;YACR,IAAI,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;SACxD,CAAA;IACH,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;QACrB,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,EAAE,CAAA;IAC/B,CAAC;CACF"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface EditorOptions {
|
|
2
|
+
container: HTMLElement;
|
|
3
|
+
content?: string;
|
|
4
|
+
readonly?: boolean;
|
|
5
|
+
theme?: 'light' | 'dark';
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
prism?: object;
|
|
8
|
+
}
|
|
9
|
+
export interface EditorOutput {
|
|
10
|
+
markdown: string;
|
|
11
|
+
html: string;
|
|
12
|
+
}
|
|
13
|
+
export interface PaneConfig {
|
|
14
|
+
container: HTMLElement;
|
|
15
|
+
onUpdate?: (content: string) => void;
|
|
16
|
+
onScroll?: (scrollTop: number, scrollHeight: number) => void;
|
|
17
|
+
prism?: object;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,WAAW,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/highlight/markdown.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;AAE1D,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEtD;AAMD,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function highlightMarkdown(text) {
|
|
2
|
+
return escapeHtml(text);
|
|
3
|
+
}
|
|
4
|
+
function escapeHtml(text) {
|
|
5
|
+
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
6
|
+
}
|
|
7
|
+
export function getHighlightStyles() {
|
|
8
|
+
return '';
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=markdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../src/highlight/markdown.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,iBAAiB,CAAC,IAAY;IAC5C,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;AACzB,CAAC;AAED,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;AAChF,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,OAAO,EAAE,CAAA;AACX,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { Editor } from './core/editor.js';
|
|
2
|
+
export type { EditorOptions, EditorOutput } from './core/types.js';
|
|
3
|
+
export { EditorPane } from './view/editor-pane.js';
|
|
4
|
+
export { PreviewPane } from './view/preview-pane.js';
|
|
5
|
+
export { TwoPanelLayout } from './view/two-panel-layout.js';
|
|
6
|
+
export { parseMarkdownToHTML } from './parser/markdown.js';
|
|
7
|
+
export { highlightMarkdown } from './highlight/markdown.js';
|
|
8
|
+
import { Editor } from './core/editor.js';
|
|
9
|
+
export declare function createEditor(options: {
|
|
10
|
+
container: HTMLElement;
|
|
11
|
+
content?: string;
|
|
12
|
+
}): Editor;
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,wBAAgB,YAAY,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,WAAW,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAE1F"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { Editor } from './core/editor.js';
|
|
2
|
+
export { EditorPane } from './view/editor-pane.js';
|
|
3
|
+
export { PreviewPane } from './view/preview-pane.js';
|
|
4
|
+
export { TwoPanelLayout } from './view/two-panel-layout.js';
|
|
5
|
+
export { parseMarkdownToHTML } from './parser/markdown.js';
|
|
6
|
+
export { highlightMarkdown } from './highlight/markdown.js';
|
|
7
|
+
import { Editor } from './core/editor.js';
|
|
8
|
+
export function createEditor(options) {
|
|
9
|
+
return new Editor(options);
|
|
10
|
+
}
|
|
11
|
+
// test
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,MAAM,UAAU,YAAY,CAAC,OAAqD;IAChF,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAA;AAC5B,CAAC;AACD,OAAO"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface PrismInstance {
|
|
2
|
+
languages?: Record<string, unknown>;
|
|
3
|
+
highlight?(code: string, grammar: unknown, language: string): string;
|
|
4
|
+
}
|
|
5
|
+
export declare function parseMarkdownToHTML(markdown: string, prism?: PrismInstance): string;
|
|
6
|
+
//# sourceMappingURL=markdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/parser/markdown.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACnC,SAAS,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CACrE;AA6BD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,CAYnF"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { marked } from 'marked';
|
|
2
|
+
import { markedHighlight } from 'marked-highlight';
|
|
3
|
+
marked.use({
|
|
4
|
+
gfm: true,
|
|
5
|
+
breaks: true,
|
|
6
|
+
});
|
|
7
|
+
const configuredPrisms = new WeakSet();
|
|
8
|
+
function configureHighlightExtension(prism) {
|
|
9
|
+
if (configuredPrisms.has(prism)) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
marked.use(markedHighlight({
|
|
13
|
+
langPrefix: 'language-',
|
|
14
|
+
highlight(code, lang) {
|
|
15
|
+
if (prism.highlight) {
|
|
16
|
+
try {
|
|
17
|
+
const prismLang = prism.languages?.[lang];
|
|
18
|
+
return prism.highlight(code, prismLang, lang);
|
|
19
|
+
}
|
|
20
|
+
catch {
|
|
21
|
+
return code;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return code;
|
|
25
|
+
},
|
|
26
|
+
}));
|
|
27
|
+
configuredPrisms.add(prism);
|
|
28
|
+
}
|
|
29
|
+
export function parseMarkdownToHTML(markdown, prism) {
|
|
30
|
+
if (!markdown.trim())
|
|
31
|
+
return '';
|
|
32
|
+
if (prism) {
|
|
33
|
+
configureHighlightExtension(prism);
|
|
34
|
+
}
|
|
35
|
+
const result = marked(markdown);
|
|
36
|
+
if (typeof result === 'string') {
|
|
37
|
+
return result;
|
|
38
|
+
}
|
|
39
|
+
return '';
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=markdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../src/parser/markdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,CAAC,GAAG,CAAC;IACT,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;CACb,CAAC,CAAA;AAOF,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAiB,CAAA;AAErD,SAAS,2BAA2B,CAAC,KAAoB;IACvD,IAAI,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QAChC,OAAM;IACR,CAAC;IAED,MAAM,CAAC,GAAG,CACR,eAAe,CAAC;QACd,UAAU,EAAE,WAAW;QACvB,SAAS,CAAC,IAAI,EAAE,IAAI;YAClB,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;gBACpB,IAAI,CAAC;oBACH,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAA;oBACzC,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;gBAC/C,CAAC;gBAAC,MAAM,CAAC;oBACP,OAAO,IAAI,CAAA;gBACb,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;KACF,CAAC,CACH,CAAA;IAED,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,KAAqB;IACzE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAA;IAE/B,IAAI,KAAK,EAAE,CAAC;QACV,2BAA2B,CAAC,KAAK,CAAC,CAAA;IACpC,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC/B,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,MAAM,CAAA;IACf,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare class EditorPane {
|
|
2
|
+
private textarea;
|
|
3
|
+
private highlightOverlay;
|
|
4
|
+
private container;
|
|
5
|
+
private onUpdate;
|
|
6
|
+
private onScroll;
|
|
7
|
+
constructor(config: {
|
|
8
|
+
container: HTMLElement;
|
|
9
|
+
onUpdate?: (content: string) => void;
|
|
10
|
+
onScroll?: (scrollTop: number, scrollHeight: number) => void;
|
|
11
|
+
});
|
|
12
|
+
private handleInput;
|
|
13
|
+
private handleScroll;
|
|
14
|
+
private handleKeyDown;
|
|
15
|
+
private insertText;
|
|
16
|
+
private wrapSelection;
|
|
17
|
+
private setCursorAfterWrap;
|
|
18
|
+
setContent(content: string): void;
|
|
19
|
+
getContent(): string;
|
|
20
|
+
private getStyles;
|
|
21
|
+
destroy(): void;
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=editor-pane.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editor-pane.d.ts","sourceRoot":"","sources":["../../src/view/editor-pane.ts"],"names":[],"mappings":"AAgBA,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,gBAAgB,CAAgB;IACxC,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,QAAQ,CAAmD;gBAEvD,MAAM,EAAE;QAClB,SAAS,EAAE,WAAW,CAAA;QACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;QACpC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;KAC7D;IAkED,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,kBAAkB;IAc1B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC,UAAU,IAAI,MAAM;IAIpB,OAAO,CAAC,SAAS;IAgBjB,OAAO,IAAI,IAAI;CAMhB"}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { highlightMarkdown, getHighlightStyles } from '../highlight/markdown.js';
|
|
2
|
+
const SHORTCUTS = [
|
|
3
|
+
{ key: 'b', syntax: { prefix: '**', suffix: '**' } },
|
|
4
|
+
{ key: 'i', syntax: { prefix: '*', suffix: '*' } },
|
|
5
|
+
{ key: 'k', syntax: { prefix: '[', suffix: '](url)' } },
|
|
6
|
+
{ key: 'e', syntax: { prefix: '`', suffix: '`' } },
|
|
7
|
+
{ key: 's', shiftKey: true, syntax: { prefix: '~~', suffix: '~~' } },
|
|
8
|
+
];
|
|
9
|
+
export class EditorPane {
|
|
10
|
+
textarea;
|
|
11
|
+
highlightOverlay;
|
|
12
|
+
container;
|
|
13
|
+
onUpdate;
|
|
14
|
+
onScroll;
|
|
15
|
+
constructor(config) {
|
|
16
|
+
this.onUpdate = config.onUpdate ?? (() => { });
|
|
17
|
+
this.onScroll = config.onScroll ?? (() => { });
|
|
18
|
+
this.container = document.createElement('div');
|
|
19
|
+
this.container.className = 'editor-pane-container';
|
|
20
|
+
Object.assign(this.container.style, {
|
|
21
|
+
position: 'relative',
|
|
22
|
+
height: '100%',
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
});
|
|
25
|
+
const styleEl = document.createElement('style');
|
|
26
|
+
styleEl.textContent = this.getStyles() + getHighlightStyles();
|
|
27
|
+
this.container.appendChild(styleEl);
|
|
28
|
+
this.textarea = document.createElement('textarea');
|
|
29
|
+
this.textarea.className = 'editor-textarea';
|
|
30
|
+
this.textarea.placeholder = 'Write markdown here...';
|
|
31
|
+
Object.assign(this.textarea.style, {
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
top: '0',
|
|
34
|
+
left: '0',
|
|
35
|
+
width: '100%',
|
|
36
|
+
height: '100%',
|
|
37
|
+
padding: '16px',
|
|
38
|
+
border: 'none',
|
|
39
|
+
outline: 'none',
|
|
40
|
+
resize: 'none',
|
|
41
|
+
fontFamily: 'ui-monospace, monospace',
|
|
42
|
+
fontSize: '14px',
|
|
43
|
+
lineHeight: '1.6',
|
|
44
|
+
background: 'transparent',
|
|
45
|
+
color: 'transparent',
|
|
46
|
+
caretColor: '#000',
|
|
47
|
+
zIndex: '2',
|
|
48
|
+
});
|
|
49
|
+
this.highlightOverlay = document.createElement('div');
|
|
50
|
+
this.highlightOverlay.className = 'editor-highlight';
|
|
51
|
+
Object.assign(this.highlightOverlay.style, {
|
|
52
|
+
position: 'absolute',
|
|
53
|
+
top: '0',
|
|
54
|
+
left: '0',
|
|
55
|
+
width: '100%',
|
|
56
|
+
height: '100%',
|
|
57
|
+
padding: '16px',
|
|
58
|
+
pointerEvents: 'none',
|
|
59
|
+
fontFamily: 'ui-monospace, monospace',
|
|
60
|
+
fontSize: '14px',
|
|
61
|
+
lineHeight: '1.6',
|
|
62
|
+
whiteSpace: 'pre-wrap',
|
|
63
|
+
wordWrap: 'break-word',
|
|
64
|
+
overflow: 'auto',
|
|
65
|
+
zIndex: '1',
|
|
66
|
+
});
|
|
67
|
+
this.textarea.addEventListener('input', () => this.handleInput());
|
|
68
|
+
this.textarea.addEventListener('scroll', () => this.handleScroll());
|
|
69
|
+
this.textarea.addEventListener('keydown', (e) => this.handleKeyDown(e));
|
|
70
|
+
this.container.appendChild(this.highlightOverlay);
|
|
71
|
+
this.container.appendChild(this.textarea);
|
|
72
|
+
config.container.appendChild(this.container);
|
|
73
|
+
}
|
|
74
|
+
handleInput() {
|
|
75
|
+
const content = this.textarea.value;
|
|
76
|
+
this.highlightOverlay.innerHTML = highlightMarkdown(content) + '\n';
|
|
77
|
+
this.onUpdate(content);
|
|
78
|
+
}
|
|
79
|
+
handleScroll() {
|
|
80
|
+
const { scrollTop, scrollHeight } = this.textarea;
|
|
81
|
+
this.highlightOverlay.scrollTop = scrollTop;
|
|
82
|
+
this.onScroll(scrollTop, scrollHeight);
|
|
83
|
+
}
|
|
84
|
+
handleKeyDown(e) {
|
|
85
|
+
if (e.key === 'Tab') {
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
this.insertText(' ');
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
for (const shortcut of SHORTCUTS) {
|
|
91
|
+
if (e.key === shortcut.key &&
|
|
92
|
+
(e.metaKey || e.ctrlKey) &&
|
|
93
|
+
e.shiftKey === (shortcut.shiftKey ?? false)) {
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
if (typeof shortcut.syntax === 'string') {
|
|
96
|
+
this.insertText(shortcut.syntax);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
this.wrapSelection(shortcut.syntax.prefix, shortcut.syntax.suffix);
|
|
100
|
+
}
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
insertText(text) {
|
|
106
|
+
const start = this.textarea.selectionStart;
|
|
107
|
+
const end = this.textarea.selectionEnd;
|
|
108
|
+
const value = this.textarea.value;
|
|
109
|
+
this.textarea.value = value.substring(0, start) + text + value.substring(end);
|
|
110
|
+
this.textarea.selectionStart = this.textarea.selectionEnd = start + text.length;
|
|
111
|
+
this.textarea.focus();
|
|
112
|
+
this.handleInput();
|
|
113
|
+
}
|
|
114
|
+
wrapSelection(prefix, suffix) {
|
|
115
|
+
const start = this.textarea.selectionStart;
|
|
116
|
+
const end = this.textarea.selectionEnd;
|
|
117
|
+
const value = this.textarea.value;
|
|
118
|
+
const selectedText = value.substring(start, end);
|
|
119
|
+
const newText = prefix + selectedText + suffix;
|
|
120
|
+
this.textarea.value = value.substring(0, start) + newText + value.substring(end);
|
|
121
|
+
this.setCursorAfterWrap(selectedText, start, prefix, newText);
|
|
122
|
+
this.textarea.focus();
|
|
123
|
+
this.handleInput();
|
|
124
|
+
}
|
|
125
|
+
setCursorAfterWrap(selectedText, start, prefix, newText) {
|
|
126
|
+
if (selectedText.length === 0) {
|
|
127
|
+
this.textarea.selectionStart = this.textarea.selectionEnd = start + prefix.length;
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
this.textarea.selectionStart = start;
|
|
131
|
+
this.textarea.selectionEnd = start + newText.length;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
setContent(content) {
|
|
135
|
+
this.textarea.value = content;
|
|
136
|
+
this.handleInput();
|
|
137
|
+
}
|
|
138
|
+
getContent() {
|
|
139
|
+
return this.textarea.value;
|
|
140
|
+
}
|
|
141
|
+
getStyles() {
|
|
142
|
+
return `
|
|
143
|
+
.editor-pane-container {
|
|
144
|
+
border: 1px solid #e0e0e0;
|
|
145
|
+
border-radius: 4px;
|
|
146
|
+
background: #ffffff;
|
|
147
|
+
}
|
|
148
|
+
.editor-textarea::placeholder {
|
|
149
|
+
color: #999;
|
|
150
|
+
}
|
|
151
|
+
.editor-textarea::selection {
|
|
152
|
+
background: #b3d9ff;
|
|
153
|
+
}
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
destroy() {
|
|
157
|
+
this.textarea.removeEventListener('input', () => this.handleInput());
|
|
158
|
+
this.textarea.removeEventListener('scroll', () => this.handleScroll());
|
|
159
|
+
this.textarea.removeEventListener('keydown', (e) => this.handleKeyDown(e));
|
|
160
|
+
this.container.remove();
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
//# sourceMappingURL=editor-pane.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editor-pane.js","sourceRoot":"","sources":["../../src/view/editor-pane.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { PrismInstance } from '../parser/markdown.js';
|
|
2
|
+
export declare class PreviewPane {
|
|
3
|
+
private container;
|
|
4
|
+
private content;
|
|
5
|
+
private onScroll;
|
|
6
|
+
private prism?;
|
|
7
|
+
private scrollHandler;
|
|
8
|
+
constructor(config: {
|
|
9
|
+
container: HTMLElement;
|
|
10
|
+
onScroll?: (scrollTop: number, scrollHeight: number) => void;
|
|
11
|
+
prism?: PrismInstance;
|
|
12
|
+
});
|
|
13
|
+
private handleScroll;
|
|
14
|
+
setContent(markdown: string): void;
|
|
15
|
+
setScrollRatio(ratio: number): void;
|
|
16
|
+
private getStyles;
|
|
17
|
+
destroy(): void;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=preview-pane.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preview-pane.d.ts","sourceRoot":"","sources":["../../src/view/preview-pane.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,KAAK,CAAC,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAY;gBAErB,MAAM,EAAE;QAClB,SAAS,EAAE,WAAW,CAAA;QACtB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;QAC5D,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB;IAkCD,OAAO,CAAC,YAAY;IAKpB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIlC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKnC,OAAO,CAAC,SAAS;IAsEjB,OAAO,IAAI,IAAI;CAIhB"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { parseMarkdownToHTML } from '../parser/markdown.js';
|
|
2
|
+
export class PreviewPane {
|
|
3
|
+
container;
|
|
4
|
+
content;
|
|
5
|
+
onScroll;
|
|
6
|
+
prism;
|
|
7
|
+
scrollHandler;
|
|
8
|
+
constructor(config) {
|
|
9
|
+
this.onScroll = config.onScroll ?? (() => { });
|
|
10
|
+
if (config.prism !== undefined) {
|
|
11
|
+
this.prism = config.prism;
|
|
12
|
+
}
|
|
13
|
+
this.scrollHandler = () => this.handleScroll();
|
|
14
|
+
this.container = document.createElement('div');
|
|
15
|
+
this.container.className = 'preview-pane';
|
|
16
|
+
Object.assign(this.container.style, {
|
|
17
|
+
height: '100%',
|
|
18
|
+
overflow: 'hidden',
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexDirection: 'column',
|
|
21
|
+
});
|
|
22
|
+
const styleEl = document.createElement('style');
|
|
23
|
+
styleEl.textContent = this.getStyles();
|
|
24
|
+
this.container.appendChild(styleEl);
|
|
25
|
+
this.content = document.createElement('div');
|
|
26
|
+
this.content.className = 'preview-content';
|
|
27
|
+
Object.assign(this.content.style, {
|
|
28
|
+
padding: '16px',
|
|
29
|
+
overflow: 'auto',
|
|
30
|
+
flex: '1',
|
|
31
|
+
});
|
|
32
|
+
this.content.addEventListener('scroll', this.scrollHandler);
|
|
33
|
+
this.container.appendChild(this.content);
|
|
34
|
+
config.container.appendChild(this.container);
|
|
35
|
+
}
|
|
36
|
+
handleScroll() {
|
|
37
|
+
const { scrollTop, scrollHeight } = this.content;
|
|
38
|
+
this.onScroll(scrollTop, scrollHeight);
|
|
39
|
+
}
|
|
40
|
+
setContent(markdown) {
|
|
41
|
+
this.content.innerHTML = parseMarkdownToHTML(markdown, this.prism);
|
|
42
|
+
}
|
|
43
|
+
setScrollRatio(ratio) {
|
|
44
|
+
const maxScroll = this.content.scrollHeight - this.content.clientHeight;
|
|
45
|
+
this.content.scrollTop = maxScroll * ratio;
|
|
46
|
+
}
|
|
47
|
+
getStyles() {
|
|
48
|
+
return `
|
|
49
|
+
.preview-pane {
|
|
50
|
+
border: 1px solid #e0e0e0;
|
|
51
|
+
border-radius: 4px;
|
|
52
|
+
background: #ffffff;
|
|
53
|
+
}
|
|
54
|
+
.preview-content h1,
|
|
55
|
+
.preview-content h2,
|
|
56
|
+
.preview-content h3,
|
|
57
|
+
.preview-content h4,
|
|
58
|
+
.preview-content h5,
|
|
59
|
+
.preview-content h6 {
|
|
60
|
+
margin-top: 1.5em;
|
|
61
|
+
margin-bottom: 0.5em;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
line-height: 1.25;
|
|
64
|
+
}
|
|
65
|
+
.preview-content h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
|
|
66
|
+
.preview-content h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
|
|
67
|
+
.preview-content h3 { font-size: 1.25em; }
|
|
68
|
+
.preview-content h4 { font-size: 1em; }
|
|
69
|
+
.preview-content h5 { font-size: 0.875em; }
|
|
70
|
+
.preview-content h6 { font-size: 0.85em; color: #6a737d; }
|
|
71
|
+
.preview-content p { margin: 1em 0; }
|
|
72
|
+
.preview-content ul, .preview-content ol { padding-left: 2em; margin: 1em 0; }
|
|
73
|
+
.preview-content li { margin: 0.25em 0; }
|
|
74
|
+
.preview-content code {
|
|
75
|
+
background: #f6f8fa;
|
|
76
|
+
padding: 0.2em 0.4em;
|
|
77
|
+
border-radius: 3px;
|
|
78
|
+
font-family: ui-monospace, monospace;
|
|
79
|
+
font-size: 0.9em;
|
|
80
|
+
}
|
|
81
|
+
.preview-content pre {
|
|
82
|
+
background: #f6f8fa;
|
|
83
|
+
padding: 16px;
|
|
84
|
+
border-radius: 6px;
|
|
85
|
+
overflow: auto;
|
|
86
|
+
margin: 1em 0;
|
|
87
|
+
}
|
|
88
|
+
.preview-content pre code {
|
|
89
|
+
background: transparent;
|
|
90
|
+
padding: 0;
|
|
91
|
+
}
|
|
92
|
+
.preview-content blockquote {
|
|
93
|
+
border-left: 4px solid #dfe2e5;
|
|
94
|
+
padding-left: 1em;
|
|
95
|
+
color: #6a737d;
|
|
96
|
+
margin: 1em 0;
|
|
97
|
+
}
|
|
98
|
+
.preview-content img {
|
|
99
|
+
max-width: 100%;
|
|
100
|
+
height: auto;
|
|
101
|
+
}
|
|
102
|
+
.preview-content a {
|
|
103
|
+
color: #0366d6;
|
|
104
|
+
text-decoration: none;
|
|
105
|
+
}
|
|
106
|
+
.preview-content a:hover {
|
|
107
|
+
text-decoration: underline;
|
|
108
|
+
}
|
|
109
|
+
.preview-content hr {
|
|
110
|
+
border: none;
|
|
111
|
+
border-top: 1px solid #e1e4e8;
|
|
112
|
+
margin: 2em 0;
|
|
113
|
+
}
|
|
114
|
+
`;
|
|
115
|
+
}
|
|
116
|
+
destroy() {
|
|
117
|
+
this.content.removeEventListener('scroll', this.scrollHandler);
|
|
118
|
+
this.container.remove();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
//# sourceMappingURL=preview-pane.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preview-pane.js","sourceRoot":"","sources":["../../src/view/preview-pane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAG3D,MAAM,OAAO,WAAW;IACd,SAAS,CAAgB;IACzB,OAAO,CAAgB;IACvB,QAAQ,CAAmD;IAC3D,KAAK,CAAgB;IACrB,aAAa,CAAY;IAEjC,YAAY,MAIX;QACC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QAC7C,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;QAC3B,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAA;QAE9C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC9C,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,cAAc,CAAA;QACzC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YAClC,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;SACxB,CAAC,CAAA;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC/C,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAA;QACtC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAEnC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,iBAAiB,CAAA;QAC1C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAChC,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE,GAAG;SACV,CAAC,CAAA;QAEF,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAE3D,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACxC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC9C,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QAChD,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC,CAAA;IACxC,CAAC;IAED,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,cAAc,CAAC,KAAa;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;QACvE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,GAAG,KAAK,CAAA;IAC5C,CAAC;IAEO,SAAS;QACf,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEN,CAAA;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAA;IACzB,CAAC;CACF"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare class TwoPanelLayout {
|
|
2
|
+
private container;
|
|
3
|
+
private editorPaneContainer;
|
|
4
|
+
private previewPaneContainer;
|
|
5
|
+
private divider;
|
|
6
|
+
private editorPane;
|
|
7
|
+
private previewPane;
|
|
8
|
+
private content;
|
|
9
|
+
private isDragging;
|
|
10
|
+
private prism?;
|
|
11
|
+
constructor(config: {
|
|
12
|
+
container: HTMLElement;
|
|
13
|
+
initialContent?: string;
|
|
14
|
+
prism?: object;
|
|
15
|
+
});
|
|
16
|
+
private handleEditorUpdate;
|
|
17
|
+
private syncScroll;
|
|
18
|
+
private startDrag;
|
|
19
|
+
private handleDrag;
|
|
20
|
+
private stopDrag;
|
|
21
|
+
getMarkdown(): string;
|
|
22
|
+
getHTML(): string;
|
|
23
|
+
getBoth(): {
|
|
24
|
+
markdown: string;
|
|
25
|
+
html: string;
|
|
26
|
+
};
|
|
27
|
+
setContent(content: string): void;
|
|
28
|
+
private getStyles;
|
|
29
|
+
destroy(): void;
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=two-panel-layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"two-panel-layout.d.ts","sourceRoot":"","sources":["../../src/view/two-panel-layout.ts"],"names":[],"mappings":"AAIA,qBAAa,cAAc;IACzB,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,oBAAoB,CAAgB;IAC5C,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAC,CAAQ;gBAEV,MAAM,EAAE;QAAE,SAAS,EAAE,WAAW,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;IAgFvF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,QAAQ;IAOhB,WAAW,IAAI,MAAM;IAIrB,OAAO,IAAI,MAAM;IAIjB,OAAO,IAAI;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAQ7C,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAMjC,OAAO,CAAC,SAAS;IAajB,OAAO,IAAI,IAAI;CAOhB"}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { EditorPane } from './editor-pane.js';
|
|
2
|
+
import { PreviewPane } from './preview-pane.js';
|
|
3
|
+
export class TwoPanelLayout {
|
|
4
|
+
container;
|
|
5
|
+
editorPaneContainer;
|
|
6
|
+
previewPaneContainer;
|
|
7
|
+
divider;
|
|
8
|
+
editorPane;
|
|
9
|
+
previewPane;
|
|
10
|
+
content = '';
|
|
11
|
+
isDragging = false;
|
|
12
|
+
prism;
|
|
13
|
+
constructor(config) {
|
|
14
|
+
this.content = config.initialContent ?? '';
|
|
15
|
+
if (config.prism !== undefined) {
|
|
16
|
+
this.prism = config.prism;
|
|
17
|
+
}
|
|
18
|
+
this.container = document.createElement('div');
|
|
19
|
+
this.container.className = 'two-panel-layout';
|
|
20
|
+
Object.assign(this.container.style, {
|
|
21
|
+
display: 'flex',
|
|
22
|
+
height: '100%',
|
|
23
|
+
gap: '0',
|
|
24
|
+
});
|
|
25
|
+
const styleEl = document.createElement('style');
|
|
26
|
+
styleEl.textContent = this.getStyles();
|
|
27
|
+
this.container.appendChild(styleEl);
|
|
28
|
+
this.editorPaneContainer = document.createElement('div');
|
|
29
|
+
this.editorPaneContainer.className = 'panel editor-panel';
|
|
30
|
+
Object.assign(this.editorPaneContainer.style, {
|
|
31
|
+
flex: '1',
|
|
32
|
+
minHeight: '0',
|
|
33
|
+
display: 'flex',
|
|
34
|
+
flexDirection: 'column',
|
|
35
|
+
});
|
|
36
|
+
this.divider = document.createElement('div');
|
|
37
|
+
this.divider.className = 'panel-divider';
|
|
38
|
+
Object.assign(this.divider.style, {
|
|
39
|
+
width: '8px',
|
|
40
|
+
cursor: 'col-resize',
|
|
41
|
+
background: '#e0e0e0',
|
|
42
|
+
position: 'relative',
|
|
43
|
+
flexShrink: '0',
|
|
44
|
+
});
|
|
45
|
+
this.divider.addEventListener('mousedown', () => this.startDrag());
|
|
46
|
+
this.previewPaneContainer = document.createElement('div');
|
|
47
|
+
this.previewPaneContainer.className = 'panel preview-panel';
|
|
48
|
+
Object.assign(this.previewPaneContainer.style, {
|
|
49
|
+
flex: '1',
|
|
50
|
+
minHeight: '0',
|
|
51
|
+
display: 'flex',
|
|
52
|
+
flexDirection: 'column',
|
|
53
|
+
});
|
|
54
|
+
this.editorPane = new EditorPane({
|
|
55
|
+
container: this.editorPaneContainer,
|
|
56
|
+
onUpdate: (content) => this.handleEditorUpdate(content),
|
|
57
|
+
onScroll: (scrollTop, scrollHeight) => this.syncScroll(scrollTop, scrollHeight, 'editor'),
|
|
58
|
+
});
|
|
59
|
+
const previewConfig = {
|
|
60
|
+
container: this.previewPaneContainer,
|
|
61
|
+
onScroll: (scrollTop, scrollHeight) => this.syncScroll(scrollTop, scrollHeight, 'preview'),
|
|
62
|
+
};
|
|
63
|
+
if (this.prism !== undefined) {
|
|
64
|
+
previewConfig.prism = this.prism;
|
|
65
|
+
}
|
|
66
|
+
this.previewPane = new PreviewPane(previewConfig);
|
|
67
|
+
this.container.appendChild(this.editorPaneContainer);
|
|
68
|
+
this.container.appendChild(this.divider);
|
|
69
|
+
this.container.appendChild(this.previewPaneContainer);
|
|
70
|
+
config.container.appendChild(this.container);
|
|
71
|
+
if (this.content) {
|
|
72
|
+
this.editorPane.setContent(this.content);
|
|
73
|
+
this.previewPane.setContent(this.content);
|
|
74
|
+
}
|
|
75
|
+
document.addEventListener('mousemove', (e) => this.handleDrag(e));
|
|
76
|
+
document.addEventListener('mouseup', () => this.stopDrag());
|
|
77
|
+
}
|
|
78
|
+
handleEditorUpdate(content) {
|
|
79
|
+
this.content = content;
|
|
80
|
+
this.previewPane.setContent(content);
|
|
81
|
+
}
|
|
82
|
+
syncScroll(scrollTop, scrollHeight, source) {
|
|
83
|
+
if (source === 'editor') {
|
|
84
|
+
const ratio = scrollTop / scrollHeight;
|
|
85
|
+
this.previewPane.setScrollRatio(ratio);
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
const ratio = scrollTop / scrollHeight;
|
|
89
|
+
const editorScrollTop = ratio * this.editorPaneContainer.scrollHeight;
|
|
90
|
+
this.editorPaneContainer.scrollTop = editorScrollTop;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
startDrag() {
|
|
94
|
+
this.isDragging = true;
|
|
95
|
+
this.divider.style.background = '#0366d6';
|
|
96
|
+
}
|
|
97
|
+
handleDrag(e) {
|
|
98
|
+
if (!this.isDragging)
|
|
99
|
+
return;
|
|
100
|
+
const containerRect = this.container.getBoundingClientRect();
|
|
101
|
+
const x = e.clientX - containerRect.left;
|
|
102
|
+
const percentage = (x / containerRect.width) * 100;
|
|
103
|
+
if (percentage > 10 && percentage < 90) {
|
|
104
|
+
this.editorPaneContainer.style.flex = `0 0 ${percentage}%`;
|
|
105
|
+
this.previewPaneContainer.style.flex = `0 0 ${100 - percentage}%`;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
stopDrag() {
|
|
109
|
+
if (this.isDragging) {
|
|
110
|
+
this.isDragging = false;
|
|
111
|
+
this.divider.style.background = '#e0e0e0';
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
getMarkdown() {
|
|
115
|
+
return this.editorPane.getContent();
|
|
116
|
+
}
|
|
117
|
+
getHTML() {
|
|
118
|
+
return this.content;
|
|
119
|
+
}
|
|
120
|
+
getBoth() {
|
|
121
|
+
const markdown = this.getMarkdown();
|
|
122
|
+
return {
|
|
123
|
+
markdown,
|
|
124
|
+
html: this.content,
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
setContent(content) {
|
|
128
|
+
this.content = content;
|
|
129
|
+
this.editorPane.setContent(content);
|
|
130
|
+
this.previewPane.setContent(content);
|
|
131
|
+
}
|
|
132
|
+
getStyles() {
|
|
133
|
+
return `
|
|
134
|
+
.two-panel-layout {
|
|
135
|
+
border: 1px solid #e0e0e0;
|
|
136
|
+
border-radius: 4px;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
}
|
|
139
|
+
.panel-divider:hover {
|
|
140
|
+
background: #bdbdbd !important;
|
|
141
|
+
}
|
|
142
|
+
`;
|
|
143
|
+
}
|
|
144
|
+
destroy() {
|
|
145
|
+
this.editorPane.destroy();
|
|
146
|
+
this.previewPane.destroy();
|
|
147
|
+
document.removeEventListener('mousemove', (e) => this.handleDrag(e));
|
|
148
|
+
document.removeEventListener('mouseup', () => this.stopDrag());
|
|
149
|
+
this.container.remove();
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
//# sourceMappingURL=two-panel-layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"two-panel-layout.js","sourceRoot":"","sources":["../../src/view/two-panel-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,MAAM,OAAO,cAAc;IACjB,SAAS,CAAgB;IACzB,mBAAmB,CAAgB;IACnC,oBAAoB,CAAgB;IACpC,OAAO,CAAgB;IACvB,UAAU,CAAY;IACtB,WAAW,CAAa;IACxB,OAAO,GAAG,EAAE,CAAA;IACZ,UAAU,GAAG,KAAK,CAAA;IAClB,KAAK,CAAS;IAEtB,YAAY,MAA2E;QACrF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,cAAc,IAAI,EAAE,CAAA;QAC1C,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;QAC3B,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC9C,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,kBAAkB,CAAA;QAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YAClC,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;SACT,CAAC,CAAA;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC/C,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAA;QACtC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAEnC,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxD,IAAI,CAAC,mBAAmB,CAAC,SAAS,GAAG,oBAAoB,CAAA;QACzD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE;YAC5C,IAAI,EAAE,GAAG;YACT,SAAS,EAAE,GAAG;YACd,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;SACxB,CAAC,CAAA;QAEF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,eAAe,CAAA;QACxC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAChC,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,YAAY;YACpB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,GAAG;SAChB,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAA;QAElE,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzD,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAG,qBAAqB,CAAA;QAC3D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE;YAC7C,IAAI,EAAE,GAAG;YACT,SAAS,EAAE,GAAG;YACd,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;SACxB,CAAC,CAAA;QAEF,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC;YAC/B,SAAS,EAAE,IAAI,CAAC,mBAAmB;YACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC;YACvD,QAAQ,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC;SAC1F,CAAC,CAAA;QAEF,MAAM,aAAa,GAIf;YACF,SAAS,EAAE,IAAI,CAAC,oBAAoB;YACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC;SAC3F,CAAA;QACD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAsB,CAAA;QACnD,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,aAAa,CAAC,CAAA;QAEjD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;QACpD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACxC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;QAErD,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAE5C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACxC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QACjE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC7D,CAAC;IAEO,kBAAkB,CAAC,OAAe;QACxC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC;IAEO,UAAU,CAAC,SAAiB,EAAE,YAAoB,EAAE,MAA4B;QACtF,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;YACxB,MAAM,KAAK,GAAG,SAAS,GAAG,YAAY,CAAA;YACtC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,SAAS,GAAG,YAAY,CAAA;YACtC,MAAM,eAAe,GAAG,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAA;YACrE,IAAI,CAAC,mBAAmB,CAAC,SAAS,GAAG,eAAe,CAAA;QACtD,CAAC;IACH,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;QACtB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;IAC3C,CAAC;IAEO,UAAU,CAAC,CAAa;QAC9B,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAM;QAE5B,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAA;QAC5D,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAA;QACxC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA;QAElD,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,UAAU,GAAG,CAAA;YAC1D,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,GAAG,GAAG,UAAU,GAAG,CAAA;QACnE,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;QAC3C,CAAC;IACH,CAAC;IAED,WAAW;QACT,OAAO,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAA;IACrC,CAAC;IAED,OAAO;QACL,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,OAAO;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,OAAO;YACL,QAAQ;YACR,IAAI,EAAE,IAAI,CAAC,OAAO;SACnB,CAAA;IACH,CAAC;IAED,UAAU,CAAC,OAAe;QACxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACnC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC;IAEO,SAAS;QACf,OAAO;;;;;;;;;KASN,CAAA;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAA;QACzB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA;QAC1B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QACpE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAA;IACzB,CAAC;CACF"}
|
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@codxse/mitosis-js",
|
|
3
|
+
"version": "1.4.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"prepublishOnly": "pnpm run build",
|
|
12
|
+
"test": "vitest",
|
|
13
|
+
"dev": "tsx watch src/index.ts",
|
|
14
|
+
"build": "tsc",
|
|
15
|
+
"start": "node dist/index.js",
|
|
16
|
+
"demo": "vite serve demo",
|
|
17
|
+
"lint": "eslint .",
|
|
18
|
+
"lint:fix": "eslint . --fix",
|
|
19
|
+
"format": "prettier --check .",
|
|
20
|
+
"format:fix": "prettier --write .",
|
|
21
|
+
"release": "standard-version",
|
|
22
|
+
"release:patch": "standard-version --release-as patch",
|
|
23
|
+
"release:minor": "standard-version --release-as minor",
|
|
24
|
+
"release:major": "standard-version --release-as major",
|
|
25
|
+
"release:dry": "standard-version --dry-run"
|
|
26
|
+
},
|
|
27
|
+
"keywords": [],
|
|
28
|
+
"author": "",
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"description": "",
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@eslint/js": "^9.18.0",
|
|
33
|
+
"@types/node": "^25.2.3",
|
|
34
|
+
"@vitest/ui": "^3.1.5",
|
|
35
|
+
"eslint": "^9.18.0",
|
|
36
|
+
"eslint-config-prettier": "^9.1.0",
|
|
37
|
+
"globals": "^15.14.0",
|
|
38
|
+
"jsdom": "^26.1.0",
|
|
39
|
+
"prettier": "^3.4.2",
|
|
40
|
+
"standard-version": "^9.5.0",
|
|
41
|
+
"tsx": "^4.21.0",
|
|
42
|
+
"typescript": "^5.9.3",
|
|
43
|
+
"typescript-eslint": "^8.20.0",
|
|
44
|
+
"vite": "^7.3.1",
|
|
45
|
+
"vitest": "^3.1.5"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"marked": "^17.0.2",
|
|
49
|
+
"marked-highlight": "^2.2.1"
|
|
50
|
+
}
|
|
51
|
+
}
|