@bendyline/squisq-editor-react 1.0.1 → 1.1.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/dist/DropZoneOverlay.d.ts +24 -0
- package/dist/DropZoneOverlay.d.ts.map +1 -0
- package/dist/DropZoneOverlay.js +53 -0
- package/dist/DropZoneOverlay.js.map +1 -0
- package/dist/EditorContext.d.ts +4 -0
- package/dist/EditorContext.d.ts.map +1 -1
- package/dist/EditorContext.js +46 -0
- package/dist/EditorContext.js.map +1 -1
- package/dist/EditorShell.d.ts +6 -1
- package/dist/EditorShell.d.ts.map +1 -1
- package/dist/EditorShell.js +51 -6
- package/dist/EditorShell.js.map +1 -1
- package/dist/MediaBin.d.ts +18 -0
- package/dist/MediaBin.d.ts.map +1 -0
- package/dist/MediaBin.js +141 -0
- package/dist/MediaBin.js.map +1 -0
- package/dist/Toolbar.d.ts +5 -1
- package/dist/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar.js +2 -2
- package/dist/Toolbar.js.map +1 -1
- package/dist/hooks/useFileDrop.d.ts +41 -0
- package/dist/hooks/useFileDrop.d.ts.map +1 -0
- package/dist/hooks/useFileDrop.js +167 -0
- package/dist/hooks/useFileDrop.js.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/dropUtils.d.ts +36 -0
- package/dist/utils/dropUtils.d.ts.map +1 -0
- package/dist/utils/dropUtils.js +71 -0
- package/dist/utils/dropUtils.js.map +1 -0
- package/package.json +4 -3
- package/src/DropZoneOverlay.tsx +137 -0
- package/src/EditorContext.tsx +56 -0
- package/src/EditorShell.tsx +102 -8
- package/src/MediaBin.tsx +223 -0
- package/src/Toolbar.tsx +21 -1
- package/src/hooks/useFileDrop.ts +226 -0
- package/src/index.ts +23 -0
- package/src/styles/editor.css +318 -0
- package/src/utils/dropUtils.ts +88 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DropZoneOverlay
|
|
3
|
+
*
|
|
4
|
+
* Full-editor overlay that appears when files are dragged over the editor.
|
|
5
|
+
* Shows contextual drop zones depending on the type of files being dragged:
|
|
6
|
+
* - Media files → single "Media" drop zone
|
|
7
|
+
* - Text files → two zones: "Insert" (at cursor) and "Replace" (all content)
|
|
8
|
+
* - Mixed files → all three zones
|
|
9
|
+
*/
|
|
10
|
+
import type { DragContentType, UseFileDropResult } from './hooks/useFileDrop';
|
|
11
|
+
export interface DropZoneOverlayProps {
|
|
12
|
+
/** What kind of content is being dragged */
|
|
13
|
+
dragContentType: DragContentType;
|
|
14
|
+
/** Factory that creates event props for a specific drop target */
|
|
15
|
+
zoneProps: UseFileDropResult['zoneProps'];
|
|
16
|
+
/** Whether a MediaProvider is available (disables media zone when false) */
|
|
17
|
+
hasMediaProvider: boolean;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Full-size overlay with contextual drop targets for file uploads.
|
|
21
|
+
* Rendered conditionally by EditorShell when files are dragged over the editor.
|
|
22
|
+
*/
|
|
23
|
+
export declare function DropZoneOverlay({ dragContentType, zoneProps, hasMediaProvider, }: DropZoneOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=DropZoneOverlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropZoneOverlay.d.ts","sourceRoot":"","sources":["../src/DropZoneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAc,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE1F,MAAM,WAAW,oBAAoB;IACnC,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,kEAAkE;IAClE,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC1C,4EAA4E;IAC5E,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,eAAe,EACf,SAAS,EACT,gBAAgB,GACjB,EAAE,oBAAoB,2CAyCtB"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* DropZoneOverlay
|
|
4
|
+
*
|
|
5
|
+
* Full-editor overlay that appears when files are dragged over the editor.
|
|
6
|
+
* Shows contextual drop zones depending on the type of files being dragged:
|
|
7
|
+
* - Media files → single "Media" drop zone
|
|
8
|
+
* - Text files → two zones: "Insert" (at cursor) and "Replace" (all content)
|
|
9
|
+
* - Mixed files → all three zones
|
|
10
|
+
*/
|
|
11
|
+
import { useState } from 'react';
|
|
12
|
+
/**
|
|
13
|
+
* Full-size overlay with contextual drop targets for file uploads.
|
|
14
|
+
* Rendered conditionally by EditorShell when files are dragged over the editor.
|
|
15
|
+
*/
|
|
16
|
+
export function DropZoneOverlay({ dragContentType, zoneProps, hasMediaProvider, }) {
|
|
17
|
+
const showMedia = dragContentType === 'media' || dragContentType === 'mixed';
|
|
18
|
+
const showText = dragContentType === 'text' || dragContentType === 'mixed';
|
|
19
|
+
return (_jsx("div", { className: "squisq-drop-overlay", children: _jsxs("div", { className: "squisq-drop-overlay-inner", children: [showMedia && (_jsx(DropZone, { target: "media", zoneProps: zoneProps, icon: "\uD83D\uDCF7", label: "Media", description: hasMediaProvider ? 'Add to file bin' : 'No file storage configured', disabled: !hasMediaProvider, variant: "media" })), showText && (_jsxs(_Fragment, { children: [_jsx(DropZone, { target: "insert", zoneProps: zoneProps, icon: "\uD83D\uDCCB", label: "Insert", description: "Insert content at cursor", variant: "insert" }), _jsx(DropZone, { target: "replace", zoneProps: zoneProps, icon: "\uD83D\uDD04", label: "Replace", description: "Replace all editor content", variant: "replace" })] }))] }) }));
|
|
20
|
+
}
|
|
21
|
+
function DropZone({ target, zoneProps, icon, label, description, disabled, variant, }) {
|
|
22
|
+
const [isHovering, setIsHovering] = useState(false);
|
|
23
|
+
const props = zoneProps(target);
|
|
24
|
+
return (_jsxs("div", { className: [
|
|
25
|
+
'squisq-drop-zone',
|
|
26
|
+
`squisq-drop-zone--${variant}`,
|
|
27
|
+
isHovering && !disabled ? 'squisq-drop-zone--active' : '',
|
|
28
|
+
disabled ? 'squisq-drop-zone--disabled' : '',
|
|
29
|
+
]
|
|
30
|
+
.filter(Boolean)
|
|
31
|
+
.join(' '), onDragOver: (e) => {
|
|
32
|
+
if (disabled) {
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
props.onDragOver(e);
|
|
37
|
+
}, onDragEnter: (e) => {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
if (!disabled)
|
|
40
|
+
setIsHovering(true);
|
|
41
|
+
}, onDragLeave: (e) => {
|
|
42
|
+
e.preventDefault();
|
|
43
|
+
setIsHovering(false);
|
|
44
|
+
}, onDrop: (e) => {
|
|
45
|
+
setIsHovering(false);
|
|
46
|
+
if (disabled) {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
props.onDrop(e);
|
|
51
|
+
}, children: [_jsx("span", { className: "squisq-drop-zone-icon", children: icon }), _jsx("span", { className: "squisq-drop-zone-label", children: label }), _jsx("span", { className: "squisq-drop-zone-desc", children: description })] }));
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=DropZoneOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropZoneOverlay.js","sourceRoot":"","sources":["../src/DropZoneOverlay.tsx"],"names":[],"mappings":"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"}
|
package/dist/EditorContext.d.ts
CHANGED
|
@@ -44,6 +44,10 @@ export interface EditorActions {
|
|
|
44
44
|
setMonacoEditor: (editor: MonacoEditor | null) => void;
|
|
45
45
|
/** Set the color theme */
|
|
46
46
|
setTheme: (theme: EditorTheme) => void;
|
|
47
|
+
/** Insert text at the current cursor position in the active editor */
|
|
48
|
+
insertAtCursor: (text: string) => void;
|
|
49
|
+
/** Replace all editor content with the given text */
|
|
50
|
+
replaceAll: (text: string) => void;
|
|
47
51
|
}
|
|
48
52
|
export interface EditorContextValue extends EditorState, EditorActions {
|
|
49
53
|
/** The live Tiptap editor instance (null when WYSIWYG is not mounted) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../src/EditorContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../src/EditorContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAG9D,kDAAkD;AAClD,KAAK,YAAY,GAAG,cAAc,CAAC,qBAAqB,CAAC;AAIzD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,sCAAsC;IACtC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,0BAA0B;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,+DAA+D;IAC/D,cAAc,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,6BAA6B;IAC7B,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,iFAAiF;IACjF,eAAe,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,6EAA6E;IAC7E,eAAe,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,sEAAsE;IACtE,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qDAAqD;IACrD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW,EAAE,aAAa;IACpE,yEAAyE;IACzE,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,qEAAqE;IACrE,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC;AAMD;;GAEG;AAEH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD;AAID,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,eAAoB,EACpB,WAAmB,EACnB,SAAsB,EACtB,KAAK,EAAE,YAAsB,EAC7B,QAAQ,GACT,EAAE,mBAAmB,2CA4LrB"}
|
package/dist/EditorContext.js
CHANGED
|
@@ -10,6 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
10
|
import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect, } from 'react';
|
|
11
11
|
import { parseMarkdown, stringifyMarkdown } from '@bendyline/squisq/markdown';
|
|
12
12
|
import { markdownToDoc } from '@bendyline/squisq/doc';
|
|
13
|
+
import { markdownToTiptap } from './tiptapBridge';
|
|
13
14
|
// ─── Context ─────────────────────────────────────────────
|
|
14
15
|
const EditorContext = createContext(null);
|
|
15
16
|
/**
|
|
@@ -97,6 +98,47 @@ export function EditorProvider({ initialMarkdown = '', initialView = 'raw', arti
|
|
|
97
98
|
const setMarkdownSource = useCallback((source) => {
|
|
98
99
|
setMarkdownSourceRaw(source);
|
|
99
100
|
}, []);
|
|
101
|
+
const insertAtCursor = useCallback((text) => {
|
|
102
|
+
if (activeView === 'wysiwyg' && tiptapEditor) {
|
|
103
|
+
// Insert as HTML so formatting is preserved
|
|
104
|
+
const html = markdownToTiptap(text);
|
|
105
|
+
tiptapEditor.chain().focus().insertContent(html).run();
|
|
106
|
+
}
|
|
107
|
+
else if (activeView === 'raw' && monacoEditor) {
|
|
108
|
+
const position = monacoEditor.getPosition();
|
|
109
|
+
if (position) {
|
|
110
|
+
const model = monacoEditor.getModel();
|
|
111
|
+
if (model) {
|
|
112
|
+
const range = {
|
|
113
|
+
startLineNumber: position.lineNumber,
|
|
114
|
+
startColumn: position.column,
|
|
115
|
+
endLineNumber: position.lineNumber,
|
|
116
|
+
endColumn: position.column,
|
|
117
|
+
};
|
|
118
|
+
monacoEditor.executeEdits('drop', [{ range, text }]);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
// No cursor — append
|
|
123
|
+
setMarkdownSourceRaw((prev) => prev + '\n\n' + text);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
// Preview or no editor — append to end
|
|
128
|
+
setMarkdownSourceRaw((prev) => prev + '\n\n' + text);
|
|
129
|
+
}
|
|
130
|
+
}, [activeView, tiptapEditor, monacoEditor]);
|
|
131
|
+
const replaceAll = useCallback((text) => {
|
|
132
|
+
setMarkdownSourceRaw(text);
|
|
133
|
+
// Push to editors if mounted
|
|
134
|
+
if (tiptapEditor) {
|
|
135
|
+
const html = markdownToTiptap(text);
|
|
136
|
+
tiptapEditor.commands.setContent(html);
|
|
137
|
+
}
|
|
138
|
+
if (monacoEditor) {
|
|
139
|
+
monacoEditor.setValue(text);
|
|
140
|
+
}
|
|
141
|
+
}, [tiptapEditor, monacoEditor]);
|
|
100
142
|
const setMarkdownDoc = useCallback((newDoc) => {
|
|
101
143
|
setMarkdownDocState(newDoc);
|
|
102
144
|
// Stringify to update the raw source
|
|
@@ -136,6 +178,8 @@ export function EditorProvider({ initialMarkdown = '', initialView = 'raw', arti
|
|
|
136
178
|
setTiptapEditor,
|
|
137
179
|
setMonacoEditor,
|
|
138
180
|
setTheme,
|
|
181
|
+
insertAtCursor,
|
|
182
|
+
replaceAll,
|
|
139
183
|
}), [
|
|
140
184
|
markdownSource,
|
|
141
185
|
markdownDoc,
|
|
@@ -152,6 +196,8 @@ export function EditorProvider({ initialMarkdown = '', initialView = 'raw', arti
|
|
|
152
196
|
setTiptapEditor,
|
|
153
197
|
setMonacoEditor,
|
|
154
198
|
setTheme,
|
|
199
|
+
insertAtCursor,
|
|
200
|
+
replaceAll,
|
|
155
201
|
]);
|
|
156
202
|
return _jsx(EditorContext.Provider, { value: value, children: children });
|
|
157
203
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorContext.js","sourceRoot":"","sources":["../src/EditorContext.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,aAAa,EACb,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,GAEV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorContext.js","sourceRoot":"","sources":["../src/EditorContext.tsx"],"names":[],"mappings":"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"}
|
package/dist/EditorShell.d.ts
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* in an EditorProvider for shared state.
|
|
7
7
|
*/
|
|
8
8
|
import { type EditorView } from './EditorContext';
|
|
9
|
+
import type { MediaProvider } from '@bendyline/squisq/schemas';
|
|
9
10
|
export type { EditorTheme } from './EditorContext';
|
|
10
11
|
export interface EditorShellProps {
|
|
11
12
|
/** Initial markdown content */
|
|
@@ -25,10 +26,14 @@ export interface EditorShellProps {
|
|
|
25
26
|
className?: string;
|
|
26
27
|
/** CSS height for the shell container (default: '100vh') */
|
|
27
28
|
height?: string;
|
|
29
|
+
/** Optional MediaProvider for the Files panel. When set (even to null), a Files toggle appears in the toolbar. */
|
|
30
|
+
mediaProvider?: MediaProvider | null;
|
|
31
|
+
/** Show the Files toggle in the toolbar. Defaults to true when mediaProvider is passed. */
|
|
32
|
+
showFilesToggle?: boolean;
|
|
28
33
|
}
|
|
29
34
|
/**
|
|
30
35
|
* Complete markdown editor shell with toolbar, view switcher, and three
|
|
31
36
|
* editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
|
|
32
37
|
*/
|
|
33
|
-
export declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, theme, className, height, }: EditorShellProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, theme, className, height, mediaProvider, showFilesToggle, }: EditorShellProps): import("react/jsx-runtime").JSX.Element;
|
|
34
39
|
//# sourceMappingURL=EditorShell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../src/EditorShell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../src/EditorShell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAepF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0BAA0B;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kHAAkH;IAClH,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,2FAA2F;IAC3F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAoB,EACpB,WAAuB,EACvB,SAAsB,EACtB,QAAc,EACd,QAAQ,EACR,KAAe,EACf,SAAS,EACT,MAAgB,EAChB,aAAa,EACb,eAAe,GAChB,EAAE,gBAAgB,2CAqBlB"}
|
package/dist/EditorShell.js
CHANGED
|
@@ -6,22 +6,67 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
* views, and StatusBar into a complete editing experience. Wraps everything
|
|
7
7
|
* in an EditorProvider for shared state.
|
|
8
8
|
*/
|
|
9
|
-
import { useEffect } from 'react';
|
|
9
|
+
import { useEffect, useState, useCallback } from 'react';
|
|
10
10
|
import { EditorProvider, useEditorContext } from './EditorContext';
|
|
11
11
|
import { Toolbar } from './Toolbar';
|
|
12
12
|
import { StatusBar } from './StatusBar';
|
|
13
13
|
import { RawEditor } from './RawEditor';
|
|
14
14
|
import { WysiwygEditor } from './WysiwygEditor';
|
|
15
15
|
import { PreviewPanel } from './PreviewPanel';
|
|
16
|
+
import { MediaBin } from './MediaBin';
|
|
17
|
+
import { DropZoneOverlay } from './DropZoneOverlay';
|
|
18
|
+
import { useFileDrop } from './hooks/useFileDrop';
|
|
19
|
+
import { partitionFiles, processMediaFiles, processTextFile, processTextFiles, } from './utils/dropUtils';
|
|
16
20
|
/**
|
|
17
21
|
* Complete markdown editor shell with toolbar, view switcher, and three
|
|
18
22
|
* editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
|
|
19
23
|
*/
|
|
20
|
-
export function EditorShell({ initialMarkdown = '', initialView = 'wysiwyg', articleId = 'untitled', basePath = '/', onChange, theme = 'light', className, height = '100vh', }) {
|
|
21
|
-
|
|
24
|
+
export function EditorShell({ initialMarkdown = '', initialView = 'wysiwyg', articleId = 'untitled', basePath = '/', onChange, theme = 'light', className, height = '100vh', mediaProvider, showFilesToggle, }) {
|
|
25
|
+
// Show the toggle when explicitly opted in, or when mediaProvider prop was passed at all
|
|
26
|
+
const filesToggleEnabled = showFilesToggle ?? mediaProvider !== undefined;
|
|
27
|
+
return (_jsx(EditorProvider, { initialMarkdown: initialMarkdown, initialView: initialView, articleId: articleId, theme: theme, children: _jsx(EditorShellInner, { basePath: basePath, onChange: onChange, className: className, height: height, mediaProvider: mediaProvider ?? null, filesToggleEnabled: filesToggleEnabled }) }));
|
|
22
28
|
}
|
|
23
|
-
function EditorShellInner({ basePath, onChange, className, height }) {
|
|
24
|
-
const { activeView, markdownSource, theme } = useEditorContext();
|
|
29
|
+
function EditorShellInner({ basePath, onChange, className, height, mediaProvider, filesToggleEnabled, }) {
|
|
30
|
+
const { activeView, markdownSource, theme, insertAtCursor, replaceAll } = useEditorContext();
|
|
31
|
+
const [showFiles, setShowFiles] = useState(false);
|
|
32
|
+
const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
|
|
33
|
+
const isDark = theme === 'dark';
|
|
34
|
+
const handleToggleFiles = useCallback(() => {
|
|
35
|
+
setShowFiles((prev) => !prev);
|
|
36
|
+
}, []);
|
|
37
|
+
// ── Drag-and-drop file handling ──
|
|
38
|
+
const handleFileDrop = useCallback(async (files, target) => {
|
|
39
|
+
try {
|
|
40
|
+
const { media, text } = partitionFiles(files);
|
|
41
|
+
// Process media files
|
|
42
|
+
if (media.length > 0 && mediaProvider) {
|
|
43
|
+
await processMediaFiles(media, mediaProvider);
|
|
44
|
+
setMediaRefreshKey((k) => k + 1);
|
|
45
|
+
// Auto-open the media bin so the user sees the new files
|
|
46
|
+
if (!showFiles)
|
|
47
|
+
setShowFiles(true);
|
|
48
|
+
}
|
|
49
|
+
// Process text files
|
|
50
|
+
if (text.length > 0) {
|
|
51
|
+
if (target === 'replace') {
|
|
52
|
+
// Replace with first text file
|
|
53
|
+
const content = await processTextFile(text[0]);
|
|
54
|
+
replaceAll(content);
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
// Insert all text files concatenated
|
|
58
|
+
const content = await processTextFiles(text);
|
|
59
|
+
insertAtCursor(content);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
catch (err) {
|
|
64
|
+
console.error('Failed to process dropped files:', err instanceof Error ? err.message : err);
|
|
65
|
+
}
|
|
66
|
+
}, [mediaProvider, showFiles, replaceAll, insertAtCursor]);
|
|
67
|
+
const { isDragging, dragContentType, containerProps, zoneProps } = useFileDrop({
|
|
68
|
+
onDrop: handleFileDrop,
|
|
69
|
+
});
|
|
25
70
|
// Notify parent of changes
|
|
26
71
|
useEffect(() => {
|
|
27
72
|
onChange?.(markdownSource);
|
|
@@ -54,6 +99,6 @@ function EditorShellInner({ basePath, onChange, className, height }) {
|
|
|
54
99
|
flexDirection: 'column',
|
|
55
100
|
height,
|
|
56
101
|
overflow: 'hidden',
|
|
57
|
-
}, children: [_jsx("div", { className: "squisq-editor-header", children: _jsx(Toolbar, {}) }), _jsxs("div", { className: "squisq-editor-content", style: { flex: 1, overflow: 'hidden', position: 'relative' }, children: [activeView === 'raw' && _jsx(RawEditor, { theme: theme === 'dark' ? 'vs-dark' : 'vs' }), activeView === 'wysiwyg' && _jsx(WysiwygEditor, {}), activeView === 'preview' && _jsx(PreviewPanel, { basePath: basePath })] }), _jsx(StatusBar, {})] }));
|
|
102
|
+
}, ...containerProps, children: [_jsx("div", { className: "squisq-editor-header", children: _jsx(Toolbar, { showFiles: showFiles, onToggleFiles: filesToggleEnabled ? handleToggleFiles : undefined }) }), _jsxs("div", { className: "squisq-editor-content", style: { flex: 1, overflow: 'hidden', position: 'relative', display: 'flex' }, children: [_jsxs("div", { style: { flex: 1, overflow: 'hidden', position: 'relative' }, children: [activeView === 'raw' && _jsx(RawEditor, { theme: theme === 'dark' ? 'vs-dark' : 'vs' }), activeView === 'wysiwyg' && _jsx(WysiwygEditor, {}), activeView === 'preview' && _jsx(PreviewPanel, { basePath: basePath })] }), showFiles && (_jsx(MediaBin, { mediaProvider: mediaProvider, isDark: isDark, refreshKey: mediaRefreshKey })), isDragging && (_jsx(DropZoneOverlay, { dragContentType: dragContentType, zoneProps: zoneProps, hasMediaProvider: mediaProvider !== null }))] }), _jsx(StatusBar, {})] }));
|
|
58
103
|
}
|
|
59
104
|
//# sourceMappingURL=EditorShell.js.map
|
package/dist/EditorShell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorShell.js","sourceRoot":"","sources":["../src/EditorShell.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorShell.js","sourceRoot":"","sources":["../src/EditorShell.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAmB,MAAM,iBAAiB,CAAC;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAmB,MAAM,qBAAqB,CAAC;AACnE,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AA6B3B;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,eAAe,GAAG,EAAE,EACpB,WAAW,GAAG,SAAS,EACvB,SAAS,GAAG,UAAU,EACtB,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,SAAS,EACT,MAAM,GAAG,OAAO,EAChB,aAAa,EACb,eAAe,GACE;IACjB,yFAAyF;IACzF,MAAM,kBAAkB,GAAG,eAAe,IAAI,aAAa,KAAK,SAAS,CAAC;IAE1E,OAAO,CACL,KAAC,cAAc,IACb,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,YAEZ,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,IAAI,IAAI,EACpC,kBAAkB,EAAE,kBAAkB,GACtC,GACa,CAClB,CAAC;AACJ,CAAC;AAWD,SAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAa,EACb,kBAAkB,GACI;IACtB,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC7F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM,CAAC;IAEhC,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,oCAAoC;IAEpC,MAAM,cAAc,GAAG,WAAW,CAChC,KAAK,EAAE,KAAa,EAAE,MAAkB,EAAE,EAAE;QAC1C,IAAI,CAAC;YACH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAE9C,sBAAsB;YACtB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,EAAE,CAAC;gBACtC,MAAM,iBAAiB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;gBAC9C,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACjC,yDAAyD;gBACzD,IAAI,CAAC,SAAS;oBAAE,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YAED,qBAAqB;YACrB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;oBACzB,+BAA+B;oBAC/B,MAAM,OAAO,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC/C,UAAU,CAAC,OAAO,CAAC,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,qCAAqC;oBACrC,MAAM,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBAC7C,cAAc,CAAC,OAAO,CAAC,CAAC;gBAC1B,CAAC;YACH,CAAC;QACH,CAAC;QAAC,OAAO,GAAY,EAAE,CAAC;YACtB,OAAO,CAAC,KAAK,CAAC,kCAAkC,EAAE,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,CAAC,CACvD,CAAC;IAEF,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QAC7E,MAAM,EAAE,cAAc;KACvB,CAAC,CAAC;IAEH,2BAA2B;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC3B,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;oBACd,KAAK,GAAG;wBACN,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,aAAa,CAAoB,uBAAuB,CAAC,EAAE,KAAK,EAAE,CAAC;wBAC5E,MAAM;oBACR,KAAK,GAAG;wBACN,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,aAAa,CAAoB,mBAAmB,CAAC,EAAE,KAAK,EAAE,CAAC;wBACxE,MAAM;oBACR,KAAK,GAAG;wBACN,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,aAAa,CAAoB,uBAAuB,CAAC,EAAE,KAAK,EAAE,CAAC;wBAC5E,MAAM;gBACV,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eACE,SAAS,EAAE,uBAAuB,SAAS,IAAI,EAAE,EAAE,gBACvC,KAAK,EACjB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,MAAM;YACN,QAAQ,EAAE,QAAQ;SACnB,KACG,cAAc,aAGlB,cAAK,SAAS,EAAC,sBAAsB,YACnC,KAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,GACjE,GACE,EAGN,eACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,aAE7E,eAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,aAC9D,UAAU,KAAK,KAAK,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,GAAI,EACjF,UAAU,KAAK,SAAS,IAAI,KAAC,aAAa,KAAG,EAC7C,UAAU,KAAK,SAAS,IAAI,KAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,GAAI,IAC7D,EAEL,SAAS,IAAI,CACZ,KAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,GAAI,CACxF,EAGA,UAAU,IAAI,CACb,KAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,aAAa,KAAK,IAAI,GACxC,CACH,IACG,EAGN,KAAC,SAAS,KAAG,IACT,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MediaBin
|
|
3
|
+
*
|
|
4
|
+
* Toggleable side panel that displays files associated with the current
|
|
5
|
+
* content. Shows image thumbnails, icons for other types, file sizes,
|
|
6
|
+
* and provides an upload button to add new media.
|
|
7
|
+
*/
|
|
8
|
+
import type { MediaProvider } from '@bendyline/squisq/schemas';
|
|
9
|
+
export interface MediaBinProps {
|
|
10
|
+
/** The active MediaProvider (null when no media context is available) */
|
|
11
|
+
mediaProvider: MediaProvider | null;
|
|
12
|
+
/** Whether the editor is in dark mode */
|
|
13
|
+
isDark: boolean;
|
|
14
|
+
/** Incremented externally to signal a re-scan of the media list */
|
|
15
|
+
refreshKey?: number;
|
|
16
|
+
}
|
|
17
|
+
export declare function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
//# sourceMappingURL=MediaBin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaBin.d.ts","sourceRoot":"","sources":["../src/MediaBin.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,2BAA2B,CAAC;AAM3E,MAAM,WAAW,aAAa;IAC5B,yEAAyE;IACzE,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6BD,wBAAgB,QAAQ,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,aAAa,2CA2K5E"}
|
package/dist/MediaBin.js
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* MediaBin
|
|
4
|
+
*
|
|
5
|
+
* Toggleable side panel that displays files associated with the current
|
|
6
|
+
* content. Shows image thumbnails, icons for other types, file sizes,
|
|
7
|
+
* and provides an upload button to add new media.
|
|
8
|
+
*/
|
|
9
|
+
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
10
|
+
// ============================================
|
|
11
|
+
// Helpers
|
|
12
|
+
// ============================================
|
|
13
|
+
function formatSize(bytes) {
|
|
14
|
+
if (bytes < 1024)
|
|
15
|
+
return `${bytes} B`;
|
|
16
|
+
if (bytes < 1024 * 1024)
|
|
17
|
+
return `${(bytes / 1024).toFixed(1)} KB`;
|
|
18
|
+
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
19
|
+
}
|
|
20
|
+
function iconForMime(mimeType) {
|
|
21
|
+
if (mimeType.startsWith('image/'))
|
|
22
|
+
return '\u{1F5BC}';
|
|
23
|
+
if (mimeType.startsWith('audio/'))
|
|
24
|
+
return '\u{1F50A}';
|
|
25
|
+
if (mimeType.startsWith('video/'))
|
|
26
|
+
return '\u{1F3AC}';
|
|
27
|
+
if (mimeType.includes('json'))
|
|
28
|
+
return '{ }';
|
|
29
|
+
if (mimeType.includes('xml') || mimeType.includes('ssml'))
|
|
30
|
+
return '\u{2329}/\u{232A}';
|
|
31
|
+
return '\u{1F4C4}';
|
|
32
|
+
}
|
|
33
|
+
function isImageMime(mimeType) {
|
|
34
|
+
return mimeType.startsWith('image/');
|
|
35
|
+
}
|
|
36
|
+
// ============================================
|
|
37
|
+
// Component
|
|
38
|
+
// ============================================
|
|
39
|
+
export function MediaBin({ mediaProvider, isDark, refreshKey }) {
|
|
40
|
+
const [entries, setEntries] = useState([]);
|
|
41
|
+
const [thumbUrls, setThumbUrls] = useState({});
|
|
42
|
+
const [loading, setLoading] = useState(false);
|
|
43
|
+
const fileInputRef = useRef(null);
|
|
44
|
+
// Scan media entries whenever the provider changes or refreshKey bumps
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (!mediaProvider) {
|
|
47
|
+
setEntries([]);
|
|
48
|
+
setThumbUrls({});
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
let cancelled = false;
|
|
52
|
+
async function scan() {
|
|
53
|
+
setLoading(true);
|
|
54
|
+
try {
|
|
55
|
+
const list = await mediaProvider.listMedia();
|
|
56
|
+
if (cancelled)
|
|
57
|
+
return;
|
|
58
|
+
list.sort((a, b) => {
|
|
59
|
+
const aImg = isImageMime(a.mimeType) ? 0 : 1;
|
|
60
|
+
const bImg = isImageMime(b.mimeType) ? 0 : 1;
|
|
61
|
+
if (aImg !== bImg)
|
|
62
|
+
return aImg - bImg;
|
|
63
|
+
return a.name.localeCompare(b.name);
|
|
64
|
+
});
|
|
65
|
+
setEntries(list);
|
|
66
|
+
const urls = {};
|
|
67
|
+
for (const entry of list) {
|
|
68
|
+
if (isImageMime(entry.mimeType)) {
|
|
69
|
+
try {
|
|
70
|
+
urls[entry.name] = await mediaProvider.resolveUrl(entry.name);
|
|
71
|
+
}
|
|
72
|
+
catch {
|
|
73
|
+
// skip failed resolve
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
if (!cancelled)
|
|
78
|
+
setThumbUrls(urls);
|
|
79
|
+
}
|
|
80
|
+
finally {
|
|
81
|
+
if (!cancelled)
|
|
82
|
+
setLoading(false);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
scan();
|
|
86
|
+
return () => {
|
|
87
|
+
cancelled = true;
|
|
88
|
+
};
|
|
89
|
+
}, [mediaProvider, refreshKey]);
|
|
90
|
+
// ---- Upload ----
|
|
91
|
+
const handleUploadClick = useCallback(() => {
|
|
92
|
+
fileInputRef.current?.click();
|
|
93
|
+
}, []);
|
|
94
|
+
const handleFileChange = useCallback(async (e) => {
|
|
95
|
+
const files = e.target.files;
|
|
96
|
+
if (!files || !mediaProvider)
|
|
97
|
+
return;
|
|
98
|
+
setLoading(true);
|
|
99
|
+
try {
|
|
100
|
+
for (let i = 0; i < files.length; i++) {
|
|
101
|
+
const file = files[i];
|
|
102
|
+
const buffer = await file.arrayBuffer();
|
|
103
|
+
const mimeType = file.type || 'application/octet-stream';
|
|
104
|
+
await mediaProvider.addMedia(file.name, buffer, mimeType);
|
|
105
|
+
}
|
|
106
|
+
// Re-scan
|
|
107
|
+
const list = await mediaProvider.listMedia();
|
|
108
|
+
list.sort((a, b) => {
|
|
109
|
+
const aImg = isImageMime(a.mimeType) ? 0 : 1;
|
|
110
|
+
const bImg = isImageMime(b.mimeType) ? 0 : 1;
|
|
111
|
+
if (aImg !== bImg)
|
|
112
|
+
return aImg - bImg;
|
|
113
|
+
return a.name.localeCompare(b.name);
|
|
114
|
+
});
|
|
115
|
+
setEntries(list);
|
|
116
|
+
const urls = {};
|
|
117
|
+
for (const entry of list) {
|
|
118
|
+
if (isImageMime(entry.mimeType)) {
|
|
119
|
+
try {
|
|
120
|
+
urls[entry.name] = await mediaProvider.resolveUrl(entry.name);
|
|
121
|
+
}
|
|
122
|
+
catch {
|
|
123
|
+
// skip
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
setThumbUrls(urls);
|
|
128
|
+
}
|
|
129
|
+
finally {
|
|
130
|
+
setLoading(false);
|
|
131
|
+
if (fileInputRef.current)
|
|
132
|
+
fileInputRef.current.value = '';
|
|
133
|
+
}
|
|
134
|
+
}, [mediaProvider]);
|
|
135
|
+
return (_jsxs("div", { className: `squisq-media-bin${isDark ? ' squisq-media-bin--dark' : ''}`, children: [_jsxs("div", { className: "squisq-media-bin-header", children: [_jsxs("span", { className: "squisq-media-bin-title", children: ["Files ", entries.length > 0 && `(${entries.length})`] }), _jsx("button", { className: "squisq-media-bin-upload", onClick: handleUploadClick, disabled: !mediaProvider || loading, title: mediaProvider ? 'Upload files' : 'Load a content zip or select a storage slot first', children: "+ Upload" })] }), _jsxs("div", { className: "squisq-media-bin-list", children: [!mediaProvider && (_jsxs("div", { className: "squisq-media-bin-empty", children: ["No media context.", _jsx("br", {}), "Load a content zip or select a storage slot."] })), mediaProvider && entries.length === 0 && !loading && (_jsx("div", { className: "squisq-media-bin-empty", children: "No files yet." })), entries.map((entry) => {
|
|
136
|
+
const thumb = thumbUrls[entry.name];
|
|
137
|
+
const basename = entry.name.includes('/') ? entry.name.split('/').pop() : entry.name;
|
|
138
|
+
return (_jsxs("div", { className: "squisq-media-bin-item", title: `${entry.name}\n${entry.mimeType}\n${formatSize(entry.size)}`, children: [thumb ? (_jsx("img", { src: thumb, alt: basename, className: "squisq-media-bin-thumb" })) : (_jsx("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) })), _jsxs("div", { className: "squisq-media-bin-meta", children: [_jsx("div", { className: "squisq-media-bin-name", children: basename }), _jsx("div", { className: "squisq-media-bin-size", children: formatSize(entry.size) })] })] }, entry.name));
|
|
139
|
+
})] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, style: { display: 'none' }, onChange: handleFileChange })] }));
|
|
140
|
+
}
|
|
141
|
+
//# sourceMappingURL=MediaBin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaBin.js","sourceRoot":"","sources":["../src/MediaBin.tsx"],"names":[],"mappings":"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"}
|
package/dist/Toolbar.d.ts
CHANGED
|
@@ -9,11 +9,15 @@
|
|
|
9
9
|
export interface ToolbarProps {
|
|
10
10
|
/** Additional class name */
|
|
11
11
|
className?: string;
|
|
12
|
+
/** Whether the Files panel is currently shown */
|
|
13
|
+
showFiles?: boolean;
|
|
14
|
+
/** Toggle the Files panel. When provided, a "Files" button appears in the toolbar. */
|
|
15
|
+
onToggleFiles?: () => void;
|
|
12
16
|
}
|
|
13
17
|
/**
|
|
14
18
|
* Formatting toolbar.
|
|
15
19
|
* - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
|
|
16
20
|
* - Raw: appends markdown syntax to the source
|
|
17
21
|
*/
|
|
18
|
-
export declare function Toolbar({ className }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function Toolbar({ className, showFiles, onToggleFiles }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
19
23
|
//# sourceMappingURL=Toolbar.d.ts.map
|
package/dist/Toolbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAuFD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,YAAY,2CAkX5E"}
|
package/dist/Toolbar.js
CHANGED
|
@@ -91,7 +91,7 @@ function isTiptapActive(editor, id) {
|
|
|
91
91
|
* - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
|
|
92
92
|
* - Raw: appends markdown syntax to the source
|
|
93
93
|
*/
|
|
94
|
-
export function Toolbar({ className }) {
|
|
94
|
+
export function Toolbar({ className, showFiles, onToggleFiles }) {
|
|
95
95
|
const { activeView, setActiveView, markdownSource, setMarkdownSource, tiptapEditor, monacoEditor, } = useEditorContext();
|
|
96
96
|
// Force re-render when Tiptap selection or formatting state changes
|
|
97
97
|
const [, forceUpdate] = useReducer((c) => c + 1, 0);
|
|
@@ -345,6 +345,6 @@ export function Toolbar({ className }) {
|
|
|
345
345
|
return (_jsxs("div", { className: `squisq-toolbar ${className || ''}`, role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsx("div", { className: "squisq-toolbar-view-tabs", role: "tablist", "aria-label": "Editor view", children: VIEWS.map((view) => (_jsx("button", { role: "tab", "data-view": view.id, "aria-selected": activeView === view.id, className: `squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`, onClick: () => setActiveView(view.id), title: `${view.label} (${view.shortcut})`, children: view.label }, view.id))) }), !isPreview && (_jsxs("div", { className: "squisq-toolbar-actions", children: [groups.map((group, gi) => (_jsxs("div", { className: "squisq-toolbar-group", children: [gi > 0 && _jsx("div", { className: "squisq-toolbar-separator" }), BUTTONS.filter((b) => b.group === group).map((btn) => {
|
|
346
346
|
const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
|
|
347
347
|
return (_jsx("button", { className: `squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`, title: btn.title, onClick: () => handleAction(btn.id), "aria-label": btn.title, "aria-pressed": active, style: btn.iconStyle, children: btn.icon }, btn.id));
|
|
348
|
-
})] }, group))), currentTemplate !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsx("div", { className: "squisq-toolbar-group squisq-template-picker", children: _jsxs("label", { className: "squisq-template-picker-label", title: "Block template for this heading", children: ["Template:", _jsxs("select", { className: "squisq-template-picker-select", value: currentTemplate, onChange: (e) => handleTemplatePick(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), templateNames.map((name) => (_jsx("option", { value: name, children: name }, name)))] })] }) })] }))] }))] }));
|
|
348
|
+
})] }, group))), currentTemplate !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsx("div", { className: "squisq-toolbar-group squisq-template-picker", children: _jsxs("label", { className: "squisq-template-picker-label", title: "Block template for this heading", children: ["Template:", _jsxs("select", { className: "squisq-template-picker-select", value: currentTemplate, onChange: (e) => handleTemplatePick(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), templateNames.map((name) => (_jsx("option", { value: name, children: name }, name)))] })] }) })] }))] })), onToggleFiles && _jsx("div", { style: { flex: 1 } }), onToggleFiles && (_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`, onClick: onToggleFiles, title: showFiles ? 'Hide Files panel' : 'Show Files panel', "aria-pressed": showFiles, "aria-label": "Toggle Files panel", children: '\u{1F4CE}' }))] }));
|
|
349
349
|
}
|
|
350
350
|
//# sourceMappingURL=Toolbar.js.map
|