@bendyline/squisq-editor-react 1.4.0 → 1.5.1
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/DocumentSettingsDialog.d.ts +26 -0
- package/dist/DocumentSettingsDialog.d.ts.map +1 -0
- package/dist/DocumentSettingsDialog.js +115 -0
- package/dist/DocumentSettingsDialog.js.map +1 -0
- package/dist/EditorContext.d.ts +248 -4
- package/dist/EditorContext.d.ts.map +1 -1
- package/dist/EditorContext.js +248 -10
- package/dist/EditorContext.js.map +1 -1
- package/dist/EditorShell.d.ts +173 -4
- package/dist/EditorShell.d.ts.map +1 -1
- package/dist/EditorShell.js +110 -10
- package/dist/EditorShell.js.map +1 -1
- package/dist/EmojiPicker.d.ts +50 -0
- package/dist/EmojiPicker.d.ts.map +1 -0
- package/dist/EmojiPicker.js +182 -0
- package/dist/EmojiPicker.js.map +1 -0
- package/dist/ImageEditor.d.ts +68 -0
- package/dist/ImageEditor.d.ts.map +1 -0
- package/dist/ImageEditor.js +166 -0
- package/dist/ImageEditor.js.map +1 -0
- package/dist/ImageNodeView.d.ts +13 -1
- package/dist/ImageNodeView.d.ts.map +1 -1
- package/dist/ImageNodeView.js +172 -19
- package/dist/ImageNodeView.js.map +1 -1
- package/dist/ImageViewer.d.ts +26 -0
- package/dist/ImageViewer.d.ts.map +1 -0
- package/dist/ImageViewer.js +119 -0
- package/dist/ImageViewer.js.map +1 -0
- package/dist/InlineIcon.d.ts +17 -0
- package/dist/InlineIcon.d.ts.map +1 -0
- package/dist/InlineIcon.js +72 -0
- package/dist/InlineIcon.js.map +1 -0
- package/dist/InlinePreviewGutter.d.ts +52 -0
- package/dist/InlinePreviewGutter.d.ts.map +1 -0
- package/dist/InlinePreviewGutter.js +397 -0
- package/dist/InlinePreviewGutter.js.map +1 -0
- package/dist/LinkDialog.d.ts +43 -0
- package/dist/LinkDialog.d.ts.map +1 -0
- package/dist/LinkDialog.js +102 -0
- package/dist/LinkDialog.js.map +1 -0
- package/dist/MentionExtension.js +10 -7
- package/dist/MentionExtension.js.map +1 -1
- package/dist/OutlinePanel.d.ts +17 -0
- package/dist/OutlinePanel.d.ts.map +1 -0
- package/dist/OutlinePanel.js +167 -0
- package/dist/OutlinePanel.js.map +1 -0
- package/dist/PlainHtmlPreview.d.ts +50 -0
- package/dist/PlainHtmlPreview.d.ts.map +1 -0
- package/dist/PlainHtmlPreview.js +155 -0
- package/dist/PlainHtmlPreview.js.map +1 -0
- package/dist/PreviewControls.d.ts +15 -1
- package/dist/PreviewControls.d.ts.map +1 -1
- package/dist/PreviewControls.js +75 -18
- package/dist/PreviewControls.js.map +1 -1
- package/dist/PreviewPanel.d.ts +11 -10
- package/dist/PreviewPanel.d.ts.map +1 -1
- package/dist/PreviewPanel.js +20 -17
- package/dist/PreviewPanel.js.map +1 -1
- package/dist/RawEditor.d.ts.map +1 -1
- package/dist/RawEditor.js +198 -4
- package/dist/RawEditor.js.map +1 -1
- package/dist/RecorderEntry.d.ts +24 -0
- package/dist/RecorderEntry.d.ts.map +1 -0
- package/dist/RecorderEntry.js +139 -0
- package/dist/RecorderEntry.js.map +1 -0
- package/dist/TemplateAnnotation.d.ts.map +1 -1
- package/dist/TemplateAnnotation.js +32 -6
- package/dist/TemplateAnnotation.js.map +1 -1
- package/dist/TemplatePicker.d.ts +53 -0
- package/dist/TemplatePicker.d.ts.map +1 -0
- package/dist/TemplatePicker.js +388 -0
- package/dist/TemplatePicker.js.map +1 -0
- package/dist/ThemeCustomizerPanel.d.ts +32 -0
- package/dist/ThemeCustomizerPanel.d.ts.map +1 -0
- package/dist/ThemeCustomizerPanel.js +256 -0
- package/dist/ThemeCustomizerPanel.js.map +1 -0
- package/dist/ThemePicker.d.ts +33 -0
- package/dist/ThemePicker.d.ts.map +1 -0
- package/dist/ThemePicker.js +148 -0
- package/dist/ThemePicker.js.map +1 -0
- package/dist/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar.js +508 -33
- package/dist/Toolbar.js.map +1 -1
- package/dist/VersionHistoryPanel.d.ts +14 -0
- package/dist/VersionHistoryPanel.d.ts.map +1 -0
- package/dist/VersionHistoryPanel.js +147 -0
- package/dist/VersionHistoryPanel.js.map +1 -0
- package/dist/ViewMenuPanel.d.ts +13 -0
- package/dist/ViewMenuPanel.d.ts.map +1 -0
- package/dist/ViewMenuPanel.js +58 -0
- package/dist/ViewMenuPanel.js.map +1 -0
- package/dist/WysiwygEditor.d.ts.map +1 -1
- package/dist/WysiwygEditor.js +198 -9
- package/dist/WysiwygEditor.js.map +1 -1
- package/dist/__tests__/detectMarkdown.test.js +0 -14
- package/dist/__tests__/detectMarkdown.test.js.map +1 -1
- package/dist/__tests__/documentSettingsDialog.test.d.ts +2 -0
- package/dist/__tests__/documentSettingsDialog.test.d.ts.map +1 -0
- package/dist/__tests__/documentSettingsDialog.test.js +132 -0
- package/dist/__tests__/documentSettingsDialog.test.js.map +1 -0
- package/dist/__tests__/emojiPicker.test.d.ts +2 -0
- package/dist/__tests__/emojiPicker.test.d.ts.map +1 -0
- package/dist/__tests__/emojiPicker.test.js +111 -0
- package/dist/__tests__/emojiPicker.test.js.map +1 -0
- package/dist/__tests__/fileKind.test.js +13 -0
- package/dist/__tests__/fileKind.test.js.map +1 -1
- package/dist/__tests__/imageEditAffordance.test.d.ts +2 -0
- package/dist/__tests__/imageEditAffordance.test.d.ts.map +1 -0
- package/dist/__tests__/imageEditAffordance.test.js +188 -0
- package/dist/__tests__/imageEditAffordance.test.js.map +1 -0
- package/dist/__tests__/imageEditorShell.test.d.ts +2 -0
- package/dist/__tests__/imageEditorShell.test.d.ts.map +1 -0
- package/dist/__tests__/imageEditorShell.test.js +52 -0
- package/dist/__tests__/imageEditorShell.test.js.map +1 -0
- package/dist/__tests__/imageEditorState.test.d.ts +3 -0
- package/dist/__tests__/imageEditorState.test.d.ts.map +1 -0
- package/dist/__tests__/imageEditorState.test.js +148 -0
- package/dist/__tests__/imageEditorState.test.js.map +1 -0
- package/dist/__tests__/inlinePreviewGutter.test.d.ts +2 -0
- package/dist/__tests__/inlinePreviewGutter.test.d.ts.map +1 -0
- package/dist/__tests__/inlinePreviewGutter.test.js +51 -0
- package/dist/__tests__/inlinePreviewGutter.test.js.map +1 -0
- package/dist/__tests__/inlinePreviewGutterAllBlocks.test.d.ts +2 -0
- package/dist/__tests__/inlinePreviewGutterAllBlocks.test.d.ts.map +1 -0
- package/dist/__tests__/inlinePreviewGutterAllBlocks.test.js +63 -0
- package/dist/__tests__/inlinePreviewGutterAllBlocks.test.js.map +1 -0
- package/dist/__tests__/jsonEditor.test.d.ts +2 -0
- package/dist/__tests__/jsonEditor.test.d.ts.map +1 -0
- package/dist/__tests__/jsonEditor.test.js +134 -0
- package/dist/__tests__/jsonEditor.test.js.map +1 -0
- package/dist/__tests__/layersPanel.test.d.ts +2 -0
- package/dist/__tests__/layersPanel.test.d.ts.map +1 -0
- package/dist/__tests__/layersPanel.test.js +84 -0
- package/dist/__tests__/layersPanel.test.js.map +1 -0
- package/dist/__tests__/linkDialogDocPicker.test.d.ts +7 -0
- package/dist/__tests__/linkDialogDocPicker.test.d.ts.map +1 -0
- package/dist/__tests__/linkDialogDocPicker.test.js +75 -0
- package/dist/__tests__/linkDialogDocPicker.test.js.map +1 -0
- package/dist/__tests__/outlinePanel.test.d.ts +2 -0
- package/dist/__tests__/outlinePanel.test.d.ts.map +1 -0
- package/dist/__tests__/outlinePanel.test.js +68 -0
- package/dist/__tests__/outlinePanel.test.js.map +1 -0
- package/dist/__tests__/plainHtmlPreview.test.d.ts +2 -0
- package/dist/__tests__/plainHtmlPreview.test.d.ts.map +1 -0
- package/dist/__tests__/plainHtmlPreview.test.js +87 -0
- package/dist/__tests__/plainHtmlPreview.test.js.map +1 -0
- package/dist/__tests__/propertiesPanel.test.d.ts +2 -0
- package/dist/__tests__/propertiesPanel.test.d.ts.map +1 -0
- package/dist/__tests__/propertiesPanel.test.js +64 -0
- package/dist/__tests__/propertiesPanel.test.js.map +1 -0
- package/dist/__tests__/recorderFormats.test.d.ts +2 -0
- package/dist/__tests__/recorderFormats.test.d.ts.map +1 -0
- package/dist/__tests__/recorderFormats.test.js +121 -0
- package/dist/__tests__/recorderFormats.test.js.map +1 -0
- package/dist/__tests__/recorderTimingJson.test.d.ts +2 -0
- package/dist/__tests__/recorderTimingJson.test.d.ts.map +1 -0
- package/dist/__tests__/recorderTimingJson.test.js +37 -0
- package/dist/__tests__/recorderTimingJson.test.js.map +1 -0
- package/dist/__tests__/templateAnnotationRoundTrip.test.d.ts +2 -0
- package/dist/__tests__/templateAnnotationRoundTrip.test.d.ts.map +1 -0
- package/dist/__tests__/templateAnnotationRoundTrip.test.js +31 -0
- package/dist/__tests__/templateAnnotationRoundTrip.test.js.map +1 -0
- package/dist/__tests__/tiptapBridge.test.js +13 -0
- package/dist/__tests__/tiptapBridge.test.js.map +1 -1
- package/dist/__tests__/useImageEditor.test.d.ts +2 -0
- package/dist/__tests__/useImageEditor.test.d.ts.map +1 -0
- package/dist/__tests__/useImageEditor.test.js +131 -0
- package/dist/__tests__/useImageEditor.test.js.map +1 -0
- package/dist/__tests__/useMediaRecorder.test.d.ts +2 -0
- package/dist/__tests__/useMediaRecorder.test.d.ts.map +1 -0
- package/dist/__tests__/useMediaRecorder.test.js +153 -0
- package/dist/__tests__/useMediaRecorder.test.js.map +1 -0
- package/dist/__tests__/versionHistory.test.d.ts +2 -0
- package/dist/__tests__/versionHistory.test.d.ts.map +1 -0
- package/dist/__tests__/versionHistory.test.js +124 -0
- package/dist/__tests__/versionHistory.test.js.map +1 -0
- package/dist/blockSlice.d.ts +24 -0
- package/dist/blockSlice.d.ts.map +1 -0
- package/dist/blockSlice.js +63 -0
- package/dist/blockSlice.js.map +1 -0
- package/dist/buildPreviewDoc.d.ts.map +1 -1
- package/dist/buildPreviewDoc.js +52 -2
- package/dist/buildPreviewDoc.js.map +1 -1
- package/dist/emojiData.d.ts +81 -0
- package/dist/emojiData.d.ts.map +1 -0
- package/dist/emojiData.js +1283 -0
- package/dist/emojiData.js.map +1 -0
- package/dist/fileKind.d.ts +6 -2
- package/dist/fileKind.d.ts.map +1 -1
- package/dist/fileKind.js +25 -4
- package/dist/fileKind.js.map +1 -1
- package/dist/hooks/useFileDrop.d.ts.map +1 -1
- package/dist/hooks/useFileDrop.js +40 -4
- package/dist/hooks/useFileDrop.js.map +1 -1
- package/dist/imageEditor/CanvasSurface.d.ts +31 -0
- package/dist/imageEditor/CanvasSurface.d.ts.map +1 -0
- package/dist/imageEditor/CanvasSurface.js +264 -0
- package/dist/imageEditor/CanvasSurface.js.map +1 -0
- package/dist/imageEditor/ImageVersionHistoryDropdown.d.ts +39 -0
- package/dist/imageEditor/ImageVersionHistoryDropdown.d.ts.map +1 -0
- package/dist/imageEditor/ImageVersionHistoryDropdown.js +283 -0
- package/dist/imageEditor/ImageVersionHistoryDropdown.js.map +1 -0
- package/dist/imageEditor/LayersPanel.d.ts +14 -0
- package/dist/imageEditor/LayersPanel.d.ts.map +1 -0
- package/dist/imageEditor/LayersPanel.js +43 -0
- package/dist/imageEditor/LayersPanel.js.map +1 -0
- package/dist/imageEditor/PropertiesPanel.d.ts +14 -0
- package/dist/imageEditor/PropertiesPanel.d.ts.map +1 -0
- package/dist/imageEditor/PropertiesPanel.js +97 -0
- package/dist/imageEditor/PropertiesPanel.js.map +1 -0
- package/dist/imageEditor/Toolbar.d.ts +30 -0
- package/dist/imageEditor/Toolbar.d.ts.map +1 -0
- package/dist/imageEditor/Toolbar.js +108 -0
- package/dist/imageEditor/Toolbar.js.map +1 -0
- package/dist/imageEditor/icons.d.ts +24 -0
- package/dist/imageEditor/icons.d.ts.map +1 -0
- package/dist/imageEditor/icons.js +45 -0
- package/dist/imageEditor/icons.js.map +1 -0
- package/dist/imageEditor/layers/EditorImageLayer.d.ts +16 -0
- package/dist/imageEditor/layers/EditorImageLayer.d.ts.map +1 -0
- package/dist/imageEditor/layers/EditorImageLayer.js +37 -0
- package/dist/imageEditor/layers/EditorImageLayer.js.map +1 -0
- package/dist/imageEditor/layers/EditorShapeLayer.d.ts +15 -0
- package/dist/imageEditor/layers/EditorShapeLayer.d.ts.map +1 -0
- package/dist/imageEditor/layers/EditorShapeLayer.js +20 -0
- package/dist/imageEditor/layers/EditorShapeLayer.js.map +1 -0
- package/dist/imageEditor/layers/EditorTextLayer.d.ts +18 -0
- package/dist/imageEditor/layers/EditorTextLayer.d.ts.map +1 -0
- package/dist/imageEditor/layers/EditorTextLayer.js +13 -0
- package/dist/imageEditor/layers/EditorTextLayer.js.map +1 -0
- package/dist/imageEditor/layers/SelectionHandles.d.ts +17 -0
- package/dist/imageEditor/layers/SelectionHandles.d.ts.map +1 -0
- package/dist/imageEditor/layers/SelectionHandles.js +19 -0
- package/dist/imageEditor/layers/SelectionHandles.js.map +1 -0
- package/dist/imageEditor/state.d.ts +76 -0
- package/dist/imageEditor/state.d.ts.map +1 -0
- package/dist/imageEditor/state.js +87 -0
- package/dist/imageEditor/state.js.map +1 -0
- package/dist/imageEditor/useImageEditor.d.ts +53 -0
- package/dist/imageEditor/useImageEditor.d.ts.map +1 -0
- package/dist/imageEditor/useImageEditor.js +244 -0
- package/dist/imageEditor/useImageEditor.js.map +1 -0
- package/dist/imageEditor/useImageEditorTokens.d.ts +16 -0
- package/dist/imageEditor/useImageEditorTokens.d.ts.map +1 -0
- package/dist/imageEditor/useImageEditorTokens.js +45 -0
- package/dist/imageEditor/useImageEditorTokens.js.map +1 -0
- package/dist/index.d.ts +48 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +36 -0
- package/dist/index.js.map +1 -1
- package/dist/jsonEditor/EmbeddedRichTextField.d.ts +15 -0
- package/dist/jsonEditor/EmbeddedRichTextField.d.ts.map +1 -0
- package/dist/jsonEditor/EmbeddedRichTextField.js +74 -0
- package/dist/jsonEditor/EmbeddedRichTextField.js.map +1 -0
- package/dist/jsonEditor/JsonEditor.d.ts +36 -0
- package/dist/jsonEditor/JsonEditor.d.ts.map +1 -0
- package/dist/jsonEditor/JsonEditor.js +15 -0
- package/dist/jsonEditor/JsonEditor.js.map +1 -0
- package/dist/jsonEditor/JsonEditorContext.d.ts +28 -0
- package/dist/jsonEditor/JsonEditorContext.d.ts.map +1 -0
- package/dist/jsonEditor/JsonEditorContext.js +41 -0
- package/dist/jsonEditor/JsonEditorContext.js.map +1 -0
- package/dist/jsonEditor/RenderNode.d.ts +16 -0
- package/dist/jsonEditor/RenderNode.d.ts.map +1 -0
- package/dist/jsonEditor/RenderNode.js +32 -0
- package/dist/jsonEditor/RenderNode.js.map +1 -0
- package/dist/jsonEditor/editors.d.ts +36 -0
- package/dist/jsonEditor/editors.d.ts.map +1 -0
- package/dist/jsonEditor/editors.js +347 -0
- package/dist/jsonEditor/editors.js.map +1 -0
- package/dist/jsonEditor/index.d.ts +3 -0
- package/dist/jsonEditor/index.d.ts.map +1 -0
- package/dist/jsonEditor/index.js +2 -0
- package/dist/jsonEditor/index.js.map +1 -0
- package/dist/jsonEditor/useJsonEditorTokens.d.ts +13 -0
- package/dist/jsonEditor/useJsonEditorTokens.d.ts.map +1 -0
- package/dist/jsonEditor/useJsonEditorTokens.js +38 -0
- package/dist/jsonEditor/useJsonEditorTokens.js.map +1 -0
- package/dist/recorder/RecorderButton.d.ts +31 -0
- package/dist/recorder/RecorderButton.d.ts.map +1 -0
- package/dist/recorder/RecorderButton.js +24 -0
- package/dist/recorder/RecorderButton.js.map +1 -0
- package/dist/recorder/RecorderModal.d.ts +59 -0
- package/dist/recorder/RecorderModal.d.ts.map +1 -0
- package/dist/recorder/RecorderModal.js +333 -0
- package/dist/recorder/RecorderModal.js.map +1 -0
- package/dist/recorder/RecorderPanel.d.ts +25 -0
- package/dist/recorder/RecorderPanel.d.ts.map +1 -0
- package/dist/recorder/RecorderPanel.js +30 -0
- package/dist/recorder/RecorderPanel.js.map +1 -0
- package/dist/recorder/formats.d.ts +51 -0
- package/dist/recorder/formats.d.ts.map +1 -0
- package/dist/recorder/formats.js +144 -0
- package/dist/recorder/formats.js.map +1 -0
- package/dist/recorder/hooks/useMediaRecorder.d.ts +90 -0
- package/dist/recorder/hooks/useMediaRecorder.d.ts.map +1 -0
- package/dist/recorder/hooks/useMediaRecorder.js +277 -0
- package/dist/recorder/hooks/useMediaRecorder.js.map +1 -0
- package/dist/recorder/hooks/useStreamPreview.d.ts +22 -0
- package/dist/recorder/hooks/useStreamPreview.d.ts.map +1 -0
- package/dist/recorder/hooks/useStreamPreview.js +44 -0
- package/dist/recorder/hooks/useStreamPreview.js.map +1 -0
- package/dist/recorder/sources/cameraStream.d.ts +22 -0
- package/dist/recorder/sources/cameraStream.d.ts.map +1 -0
- package/dist/recorder/sources/cameraStream.js +24 -0
- package/dist/recorder/sources/cameraStream.js.map +1 -0
- package/dist/recorder/sources/micStream.d.ts +15 -0
- package/dist/recorder/sources/micStream.d.ts.map +1 -0
- package/dist/recorder/sources/micStream.js +24 -0
- package/dist/recorder/sources/micStream.js.map +1 -0
- package/dist/recorder/sources/screenStream.d.ts +53 -0
- package/dist/recorder/sources/screenStream.d.ts.map +1 -0
- package/dist/recorder/sources/screenStream.js +114 -0
- package/dist/recorder/sources/screenStream.js.map +1 -0
- package/dist/recorder/timingJson.d.ts +51 -0
- package/dist/recorder/timingJson.d.ts.map +1 -0
- package/dist/recorder/timingJson.js +42 -0
- package/dist/recorder/timingJson.js.map +1 -0
- package/dist/tiptap/TiptapAudio.d.ts +26 -0
- package/dist/tiptap/TiptapAudio.d.ts.map +1 -0
- package/dist/tiptap/TiptapAudio.js +58 -0
- package/dist/tiptap/TiptapAudio.js.map +1 -0
- package/dist/tiptap/TiptapVideo.d.ts +30 -0
- package/dist/tiptap/TiptapVideo.d.ts.map +1 -0
- package/dist/tiptap/TiptapVideo.js +66 -0
- package/dist/tiptap/TiptapVideo.js.map +1 -0
- package/dist/tiptap/useResolvedMediaSrc.d.ts +2 -0
- package/dist/tiptap/useResolvedMediaSrc.d.ts.map +1 -0
- package/dist/tiptap/useResolvedMediaSrc.js +42 -0
- package/dist/tiptap/useResolvedMediaSrc.js.map +1 -0
- package/dist/tiptapBridge.d.ts.map +1 -1
- package/dist/tiptapBridge.js +171 -14
- package/dist/tiptapBridge.js.map +1 -1
- package/dist/useHeadingLayout.d.ts +54 -0
- package/dist/useHeadingLayout.d.ts.map +1 -0
- package/dist/useHeadingLayout.js +260 -0
- package/dist/useHeadingLayout.js.map +1 -0
- package/dist/utils/collectInlineFontAwesomeCss.d.ts +21 -0
- package/dist/utils/collectInlineFontAwesomeCss.d.ts.map +1 -0
- package/dist/utils/collectInlineFontAwesomeCss.js +68 -0
- package/dist/utils/collectInlineFontAwesomeCss.js.map +1 -0
- package/dist/utils/dropUtils.d.ts +21 -2
- package/dist/utils/dropUtils.d.ts.map +1 -1
- package/dist/utils/dropUtils.js +43 -4
- package/dist/utils/dropUtils.js.map +1 -1
- package/dist/utils/normalizeMalformedAssetUrl.d.ts +15 -0
- package/dist/utils/normalizeMalformedAssetUrl.d.ts.map +1 -0
- package/dist/utils/normalizeMalformedAssetUrl.js +27 -0
- package/dist/utils/normalizeMalformedAssetUrl.js.map +1 -0
- package/package.json +8 -5
- package/src/DocumentSettingsDialog.tsx +266 -0
- package/src/EditorContext.tsx +534 -10
- package/src/EditorShell.tsx +571 -55
- package/src/EmojiPicker.tsx +332 -0
- package/src/ImageEditor.tsx +327 -0
- package/src/ImageNodeView.tsx +222 -21
- package/src/ImageViewer.tsx +221 -0
- package/src/InlineIcon.ts +84 -0
- package/src/InlinePreviewGutter.tsx +582 -0
- package/src/LinkDialog.tsx +276 -0
- package/src/MentionExtension.tsx +10 -7
- package/src/OutlinePanel.tsx +295 -0
- package/src/PlainHtmlPreview.tsx +211 -0
- package/src/PreviewControls.tsx +130 -24
- package/src/PreviewPanel.tsx +38 -21
- package/src/RawEditor.tsx +215 -4
- package/src/RecorderEntry.tsx +164 -0
- package/src/TemplateAnnotation.ts +32 -6
- package/src/TemplatePicker.tsx +818 -0
- package/src/ThemeCustomizerPanel.tsx +595 -0
- package/src/ThemePicker.tsx +319 -0
- package/src/Toolbar.tsx +708 -111
- package/src/VersionHistoryPanel.tsx +329 -0
- package/src/ViewMenuPanel.tsx +188 -0
- package/src/WysiwygEditor.tsx +229 -9
- package/src/__tests__/detectMarkdown.test.ts +0 -15
- package/src/__tests__/documentSettingsDialog.test.tsx +147 -0
- package/src/__tests__/emojiPicker.test.tsx +133 -0
- package/src/__tests__/fileKind.test.ts +16 -0
- package/src/__tests__/imageEditAffordance.test.tsx +268 -0
- package/src/__tests__/imageEditorShell.test.tsx +57 -0
- package/src/__tests__/imageEditorState.test.ts +171 -0
- package/src/__tests__/inlinePreviewGutter.test.tsx +62 -0
- package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx +103 -0
- package/src/__tests__/jsonEditor.test.tsx +168 -0
- package/src/__tests__/layersPanel.test.tsx +97 -0
- package/src/__tests__/linkDialogDocPicker.test.tsx +137 -0
- package/src/__tests__/outlinePanel.test.tsx +79 -0
- package/src/__tests__/plainHtmlPreview.test.tsx +107 -0
- package/src/__tests__/propertiesPanel.test.tsx +69 -0
- package/src/__tests__/recorderFormats.test.ts +146 -0
- package/src/__tests__/recorderTimingJson.test.ts +41 -0
- package/src/__tests__/templateAnnotationRoundTrip.test.ts +34 -0
- package/src/__tests__/tiptapBridge.test.ts +15 -0
- package/src/__tests__/useImageEditor.test.tsx +159 -0
- package/src/__tests__/useMediaRecorder.test.ts +186 -0
- package/src/__tests__/versionHistory.test.tsx +197 -0
- package/src/blockSlice.ts +75 -0
- package/src/buildPreviewDoc.ts +61 -6
- package/src/emojiData.ts +1337 -0
- package/src/fileKind.ts +30 -6
- package/src/hooks/useFileDrop.ts +40 -4
- package/src/imageEditor/CanvasSurface.tsx +402 -0
- package/src/imageEditor/ImageVersionHistoryDropdown.tsx +396 -0
- package/src/imageEditor/LayersPanel.tsx +143 -0
- package/src/imageEditor/PropertiesPanel.tsx +428 -0
- package/src/imageEditor/Toolbar.tsx +242 -0
- package/src/imageEditor/icons.tsx +144 -0
- package/src/imageEditor/image-editor.css +450 -0
- package/src/imageEditor/layers/EditorImageLayer.tsx +45 -0
- package/src/imageEditor/layers/EditorShapeLayer.tsx +62 -0
- package/src/imageEditor/layers/EditorTextLayer.tsx +45 -0
- package/src/imageEditor/layers/SelectionHandles.tsx +86 -0
- package/src/imageEditor/state.ts +153 -0
- package/src/imageEditor/useImageEditor.ts +328 -0
- package/src/imageEditor/useImageEditorTokens.ts +70 -0
- package/src/index.ts +82 -0
- package/src/jsonEditor/EmbeddedRichTextField.tsx +81 -0
- package/src/jsonEditor/JsonEditor.tsx +81 -0
- package/src/jsonEditor/JsonEditorContext.tsx +75 -0
- package/src/jsonEditor/RenderNode.tsx +66 -0
- package/src/jsonEditor/editors.tsx +678 -0
- package/src/jsonEditor/index.ts +2 -0
- package/src/jsonEditor/json-editor.css +463 -0
- package/src/jsonEditor/useJsonEditorTokens.ts +63 -0
- package/src/recorder/RecorderButton.tsx +72 -0
- package/src/recorder/RecorderModal.tsx +596 -0
- package/src/recorder/RecorderPanel.tsx +93 -0
- package/src/recorder/formats.ts +159 -0
- package/src/recorder/hooks/useMediaRecorder.ts +378 -0
- package/src/recorder/hooks/useStreamPreview.ts +47 -0
- package/src/recorder/sources/cameraStream.ts +32 -0
- package/src/recorder/sources/micStream.ts +25 -0
- package/src/recorder/sources/screenStream.ts +162 -0
- package/src/recorder/timingJson.ts +66 -0
- package/src/styles/editor.css +2490 -51
- package/src/styles/image-edit-affordance.css +201 -0
- package/src/styles/index.css +10 -0
- package/src/tiptap/TiptapAudio.tsx +86 -0
- package/src/tiptap/TiptapVideo.tsx +119 -0
- package/src/tiptap/useResolvedMediaSrc.ts +47 -0
- package/src/tiptapBridge.ts +188 -20
- package/src/useHeadingLayout.ts +294 -0
- package/src/utils/collectInlineFontAwesomeCss.ts +69 -0
- package/src/utils/dropUtils.ts +54 -6
- package/src/utils/normalizeMalformedAssetUrl.ts +22 -0
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* ImageEditor — top-level shell that wires together the toolbar,
|
|
4
|
+
* canvas surface, layers panel, and properties panel against an
|
|
5
|
+
* `ImageEditDoc` persisted in a sidecar `ContentContainer`.
|
|
6
|
+
*
|
|
7
|
+
* Hosts pass an already-scoped container (typically built with
|
|
8
|
+
* `scopeContainer(parent, basename + '_files')`). On first mount, if
|
|
9
|
+
* the sidecar has no `state.json`, the editor seeds it from
|
|
10
|
+
* `initialSrc` — the source bytes are copied to `assets/source.<ext>`
|
|
11
|
+
* so the doc is portable and round-trips through ZIP serialization.
|
|
12
|
+
*
|
|
13
|
+
* The export pipeline is `state.json` → SVG → raster blob via
|
|
14
|
+
* `exportImageEditDoc` from `@bendyline/squisq/imageEdit`.
|
|
15
|
+
*/
|
|
16
|
+
import { useCallback, useState } from 'react';
|
|
17
|
+
import { exportImageEditDoc } from '@bendyline/squisq/imageEdit';
|
|
18
|
+
import { CanvasSurface } from './imageEditor/CanvasSurface.js';
|
|
19
|
+
import { ImageVersionHistoryDropdown } from './imageEditor/ImageVersionHistoryDropdown.js';
|
|
20
|
+
import { LayersPanel } from './imageEditor/LayersPanel.js';
|
|
21
|
+
import { PropertiesPanel } from './imageEditor/PropertiesPanel.js';
|
|
22
|
+
import { Toolbar } from './imageEditor/Toolbar.js';
|
|
23
|
+
import { useImageEditor } from './imageEditor/useImageEditor.js';
|
|
24
|
+
import { useImageEditorTokens } from './imageEditor/useImageEditorTokens.js';
|
|
25
|
+
export function ImageEditor(props) {
|
|
26
|
+
const { filesContainer, initialSrc, stateFilename, allowVersioning, versioningAutoSaveIdleMs, onExport, saveBehavior = 'flush', saveFormat = 'png', saveLabel, saveTitle, theme, surface, className, } = props;
|
|
27
|
+
const tokens = useImageEditorTokens(theme, surface);
|
|
28
|
+
const { state, dispatch, flush, resolveAssetUrl, uploadAsset, versioning, ready, error } = useImageEditor({
|
|
29
|
+
container: filesContainer,
|
|
30
|
+
initialSrc,
|
|
31
|
+
stateFilename,
|
|
32
|
+
allowVersioning,
|
|
33
|
+
versioningAutoSaveIdleMs,
|
|
34
|
+
});
|
|
35
|
+
// Bumped after every save/version write so the history popover
|
|
36
|
+
// re-lists without polling.
|
|
37
|
+
const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
|
|
38
|
+
const handleExport = useCallback(async (format) => {
|
|
39
|
+
if (!state)
|
|
40
|
+
return;
|
|
41
|
+
try {
|
|
42
|
+
const blob = await exportImageEditDoc(state.doc, filesContainer, { format });
|
|
43
|
+
if (onExport) {
|
|
44
|
+
onExport(blob, format);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
// Default behavior: trigger a browser download.
|
|
48
|
+
const url = URL.createObjectURL(blob);
|
|
49
|
+
const a = document.createElement('a');
|
|
50
|
+
a.href = url;
|
|
51
|
+
a.download = `image.${format === 'jpeg' ? 'jpg' : format}`;
|
|
52
|
+
document.body.appendChild(a);
|
|
53
|
+
a.click();
|
|
54
|
+
document.body.removeChild(a);
|
|
55
|
+
URL.revokeObjectURL(url);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
catch (err) {
|
|
59
|
+
console.warn('[squisq-editor] image export failed:', err instanceof Error ? err.message : err);
|
|
60
|
+
}
|
|
61
|
+
}, [state, filesContainer, onExport]);
|
|
62
|
+
/**
|
|
63
|
+
* Save-and-close pipeline. Critical: we must `await flush()` *before*
|
|
64
|
+
* triggering the export, otherwise the parent modal may close (via the
|
|
65
|
+
* `onExport` chain) before the debounced state.json write fires —
|
|
66
|
+
* losing any layer/edit changes since the last debounce. We also save
|
|
67
|
+
* a version snapshot so the history dropdown captures the moment of
|
|
68
|
+
* save and the user can revert later.
|
|
69
|
+
*/
|
|
70
|
+
const handleSaveAndClose = useCallback(async () => {
|
|
71
|
+
try {
|
|
72
|
+
await flush();
|
|
73
|
+
if (versioning) {
|
|
74
|
+
try {
|
|
75
|
+
await versioning.saveVersion();
|
|
76
|
+
setHistoryRefreshKey((k) => k + 1);
|
|
77
|
+
}
|
|
78
|
+
catch (err) {
|
|
79
|
+
console.warn('[squisq-editor] image-edit save-version failed:', err instanceof Error ? err.message : err);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
await handleExport(saveFormat);
|
|
83
|
+
}
|
|
84
|
+
catch (err) {
|
|
85
|
+
console.warn('[squisq-editor] image-edit save-and-close failed:', err instanceof Error ? err.message : err);
|
|
86
|
+
}
|
|
87
|
+
}, [flush, versioning, handleExport, saveFormat]);
|
|
88
|
+
/**
|
|
89
|
+
* Revert `state.json` (and the in-memory editor state) to a prior
|
|
90
|
+
* snapshot. We delegate to `versioning.revertToVersion` so the
|
|
91
|
+
* sidecar write happens through the same code path as direct API
|
|
92
|
+
* use, including a snapshot of the *current* state before overwrite
|
|
93
|
+
* — that way the user can undo a revert via the same dropdown.
|
|
94
|
+
*/
|
|
95
|
+
const handleRevertToVersion = useCallback(async (version) => {
|
|
96
|
+
if (!versioning)
|
|
97
|
+
return;
|
|
98
|
+
// Cancel any pending debounced write so it can't clobber the
|
|
99
|
+
// reverted state.json after we replace it.
|
|
100
|
+
try {
|
|
101
|
+
await flush();
|
|
102
|
+
}
|
|
103
|
+
catch {
|
|
104
|
+
/* swallow — best effort */
|
|
105
|
+
}
|
|
106
|
+
const result = await versioning.revertToVersion(version);
|
|
107
|
+
if (!result.reverted)
|
|
108
|
+
return;
|
|
109
|
+
const doc = await versioning.readVersion(version);
|
|
110
|
+
if (doc) {
|
|
111
|
+
dispatch({ type: 'load', doc });
|
|
112
|
+
// Bump the history list so the just-saved \"pre-revert\"
|
|
113
|
+
// snapshot shows up in the dropdown.
|
|
114
|
+
setHistoryRefreshKey((k) => k + 1);
|
|
115
|
+
}
|
|
116
|
+
}, [dispatch, flush, versioning]);
|
|
117
|
+
const handleCreateTextAt = useCallback((x, y) => {
|
|
118
|
+
dispatch({
|
|
119
|
+
type: 'add-layer',
|
|
120
|
+
layer: {
|
|
121
|
+
type: 'text',
|
|
122
|
+
name: 'Text',
|
|
123
|
+
position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
|
|
124
|
+
content: {
|
|
125
|
+
text: 'New text',
|
|
126
|
+
style: { fontSize: 32, color: '#111111', fontFamily: 'sans-serif' },
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
});
|
|
130
|
+
dispatch({ type: 'set-tool', tool: 'select' });
|
|
131
|
+
}, [dispatch]);
|
|
132
|
+
const handleCreateShapeAt = useCallback((x, y) => {
|
|
133
|
+
dispatch({
|
|
134
|
+
type: 'add-layer',
|
|
135
|
+
layer: {
|
|
136
|
+
type: 'shape',
|
|
137
|
+
name: 'Rectangle',
|
|
138
|
+
position: {
|
|
139
|
+
x: Math.round(x - 60),
|
|
140
|
+
y: Math.round(y - 40),
|
|
141
|
+
width: 120,
|
|
142
|
+
height: 80,
|
|
143
|
+
},
|
|
144
|
+
content: {
|
|
145
|
+
shape: 'rect',
|
|
146
|
+
fill: '#3399ff',
|
|
147
|
+
stroke: '#1a4d80',
|
|
148
|
+
strokeWidth: 2,
|
|
149
|
+
borderRadius: 8,
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
});
|
|
153
|
+
dispatch({ type: 'set-tool', tool: 'select' });
|
|
154
|
+
}, [dispatch]);
|
|
155
|
+
if (error) {
|
|
156
|
+
return (_jsx("div", { className: ['squisq-image-editor', className].filter(Boolean).join(' '), style: tokens.style, children: _jsxs("div", { className: "squisq-image-editor-error", children: ["Failed to load image editor: ", error.message] }) }));
|
|
157
|
+
}
|
|
158
|
+
if (!ready || !state) {
|
|
159
|
+
return (_jsx("div", { className: ['squisq-image-editor', className].filter(Boolean).join(' '), style: tokens.style, children: _jsx("div", { className: "squisq-image-editor-loading", children: "Loading image editor\u2026" }) }));
|
|
160
|
+
}
|
|
161
|
+
return (_jsxs("div", { className: ['squisq-image-editor', className].filter(Boolean).join(' '), style: tokens.style, "data-testid": "image-editor", children: [_jsx(Toolbar, { doc: state.doc, tool: state.tool, dispatch: dispatch, uploadAsset: uploadAsset, onExport: handleExport, onSave: saveBehavior === 'export' ? handleSaveAndClose : flush, saveLabel: saveLabel ?? (saveBehavior === 'export' ? 'Save and close' : 'Save'), saveTitle: saveTitle ??
|
|
162
|
+
(saveBehavior === 'export'
|
|
163
|
+
? `Rasterize and save as ${saveFormat.toUpperCase()}`
|
|
164
|
+
: 'Save state.json'), extraTools: versioning ? (_jsx(ImageVersionHistoryDropdown, { versioning: versioning, container: filesContainer, onRevert: handleRevertToVersion, refreshKey: historyRefreshKey })) : null }), _jsxs("div", { className: "squisq-image-editor-body", children: [_jsx("div", { className: "squisq-image-editor-center", children: _jsx(CanvasSurface, { doc: state.doc, selectedLayerId: state.selectedLayerId, tool: state.tool, resolveAssetUrl: resolveAssetUrl, dispatch: dispatch, onCreateTextAt: handleCreateTextAt, onCreateShapeAt: handleCreateShapeAt }) }), _jsxs("div", { className: "squisq-image-editor-side", children: [_jsx(LayersPanel, { doc: state.doc, selectedLayerId: state.selectedLayerId, dispatch: dispatch }), _jsx(PropertiesPanel, { doc: state.doc, selectedLayerId: state.selectedLayerId, dispatch: dispatch })] })] })] }));
|
|
165
|
+
}
|
|
166
|
+
//# sourceMappingURL=ImageEditor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../src/ImageEditor.tsx"],"names":[],"mappings":"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"}
|
package/dist/ImageNodeView.d.ts
CHANGED
|
@@ -6,10 +6,22 @@
|
|
|
6
6
|
*
|
|
7
7
|
* The ProseMirror node retains the original relative path so markdown roundtrip
|
|
8
8
|
* is preserved — only the rendered DOM uses the resolved URL.
|
|
9
|
+
*
|
|
10
|
+
* When the image is hovered or selected, a small floating "Edit" affordance
|
|
11
|
+
* appears in the top-right corner — clicking it calls `openImageEdit` on the
|
|
12
|
+
* editor context, which `<EditorShell>` consumes to open a modal
|
|
13
|
+
* `<ImageEditor>` on the source path. Only shown for paths that are
|
|
14
|
+
* relative (i.e. live in the document's media container).
|
|
9
15
|
*/
|
|
10
16
|
/**
|
|
11
17
|
* Image extension with a custom React NodeView that resolves URLs
|
|
12
|
-
* through the EditorContext's MediaProvider
|
|
18
|
+
* through the EditorContext's MediaProvider, plus author-controlled
|
|
19
|
+
* width/height attributes for in-editor resizing.
|
|
20
|
+
*
|
|
21
|
+
* When `width` (and optionally `height`) is set, the markdown serializer
|
|
22
|
+
* (`tiptapToMarkdown` in `tiptapBridge.ts`) emits an HTML `<img>` tag
|
|
23
|
+
* rather than the `` shorthand so dimensions survive a
|
|
24
|
+
* markdown ↔ WYSIWYG round-trip.
|
|
13
25
|
*/
|
|
14
26
|
export declare const ImageWithMediaProvider: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
|
|
15
27
|
//# sourceMappingURL=ImageNodeView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageNodeView.d.ts","sourceRoot":"","sources":["../src/ImageNodeView.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ImageNodeView.d.ts","sourceRoot":"","sources":["../src/ImageNodeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA4NH;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,kFAuCjC,CAAC"}
|
package/dist/ImageNodeView.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* ImageNodeView — Custom Tiptap NodeView for images.
|
|
4
4
|
*
|
|
@@ -7,28 +7,49 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
7
7
|
*
|
|
8
8
|
* The ProseMirror node retains the original relative path so markdown roundtrip
|
|
9
9
|
* is preserved — only the rendered DOM uses the resolved URL.
|
|
10
|
+
*
|
|
11
|
+
* When the image is hovered or selected, a small floating "Edit" affordance
|
|
12
|
+
* appears in the top-right corner — clicking it calls `openImageEdit` on the
|
|
13
|
+
* editor context, which `<EditorShell>` consumes to open a modal
|
|
14
|
+
* `<ImageEditor>` on the source path. Only shown for paths that are
|
|
15
|
+
* relative (i.e. live in the document's media container).
|
|
10
16
|
*/
|
|
11
|
-
import { useEffect, useState } from 'react';
|
|
17
|
+
import { useEffect, useRef, useState } from 'react';
|
|
12
18
|
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
|
|
13
19
|
import Image from '@tiptap/extension-image';
|
|
14
20
|
import { useEditorContext } from './EditorContext';
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const {
|
|
21
|
+
import { normalizeMalformedAssetUrl } from './utils/normalizeMalformedAssetUrl';
|
|
22
|
+
function ImageComponent({ node, selected, editor, updateAttributes }) {
|
|
23
|
+
const { src, alt, title, width } = node.attrs;
|
|
24
|
+
const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
|
|
18
25
|
const [resolvedSrc, setResolvedSrc] = useState(src);
|
|
26
|
+
const [hovered, setHovered] = useState(false);
|
|
27
|
+
const imgRef = useRef(null);
|
|
28
|
+
// Live preview width while a resize gesture is in flight. Null means
|
|
29
|
+
// "use the persisted width attr". Committed to node attrs on mouseup.
|
|
30
|
+
const [previewWidth, setPreviewWidth] = useState(null);
|
|
19
31
|
const isThumbnail = imageDisplayMode === 'thumbnail';
|
|
32
|
+
const isEditable = editor?.isEditable ?? true;
|
|
33
|
+
// MS "Save Page As Web Page" / pandoc-style imports sometimes leave
|
|
34
|
+
// image srcs in the shape `http://<doc>_files/<asset>` — the asset
|
|
35
|
+
// folder got URL-parsed as a hostname because no scheme separator was
|
|
36
|
+
// ever there. Detect that shape (bare hostname, no dots/ports, ending
|
|
37
|
+
// in `_files`) and recover the original relative path so the media
|
|
38
|
+
// provider can resolve it from the workspace.
|
|
39
|
+
const normalizedRelativePath = normalizeMalformedAssetUrl(src);
|
|
20
40
|
const isRelative = src &&
|
|
21
41
|
!src.startsWith('blob:') &&
|
|
22
42
|
!src.startsWith('http') &&
|
|
23
43
|
!src.startsWith('data:') &&
|
|
24
44
|
!src.startsWith('/');
|
|
45
|
+
const resolveAs = normalizedRelativePath ?? (isRelative ? src : null);
|
|
25
46
|
useEffect(() => {
|
|
26
|
-
if (!mediaProvider || !
|
|
47
|
+
if (!mediaProvider || !resolveAs) {
|
|
27
48
|
setResolvedSrc(src);
|
|
28
49
|
return;
|
|
29
50
|
}
|
|
30
51
|
let cancelled = false;
|
|
31
|
-
mediaProvider.resolveUrl(
|
|
52
|
+
mediaProvider.resolveUrl(resolveAs).then((resolved) => {
|
|
32
53
|
if (!cancelled)
|
|
33
54
|
setResolvedSrc(resolved);
|
|
34
55
|
}, () => {
|
|
@@ -38,23 +59,155 @@ function ImageComponent({ node }) {
|
|
|
38
59
|
return () => {
|
|
39
60
|
cancelled = true;
|
|
40
61
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
62
|
+
// `mediaRevision` is bumped after the image editor writes back to the
|
|
63
|
+
// same path — re-resolve so we pick up the fresh blob URL.
|
|
64
|
+
}, [src, resolveAs, mediaProvider, mediaRevision]);
|
|
65
|
+
// The Edit affordance is only meaningful when:
|
|
66
|
+
// - the editor is editable (read-only previews skip it),
|
|
67
|
+
// - the path is relative (lives in the doc's container, so the editor
|
|
68
|
+
// can read+write it back), and
|
|
69
|
+
// - a media provider is wired (the modal resolves the URL through it).
|
|
70
|
+
const canEdit = isEditable && isRelative && mediaProvider !== null;
|
|
71
|
+
const showAffordance = canEdit && (selected || hovered);
|
|
72
|
+
// Resize handle is shown for any selected image in an editable view —
|
|
73
|
+
// even non-relative ones (external URLs, data URIs) — so authors can
|
|
74
|
+
// size remote pictures the same way as local ones.
|
|
75
|
+
const canResize = isEditable && !isThumbnail;
|
|
76
|
+
const showResize = canResize && (selected || hovered);
|
|
77
|
+
// Effective render width: live preview while dragging, otherwise the
|
|
78
|
+
// persisted attr. Height is always derived from the natural aspect
|
|
79
|
+
// ratio of the image element so authors can't accidentally squash it.
|
|
80
|
+
const effectiveWidth = previewWidth ?? width ?? null;
|
|
81
|
+
const beginResize = (event) => {
|
|
82
|
+
if (!canResize)
|
|
83
|
+
return;
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
event.stopPropagation();
|
|
86
|
+
const imgEl = imgRef.current;
|
|
87
|
+
if (!imgEl)
|
|
88
|
+
return;
|
|
89
|
+
const startWidth = imgEl.getBoundingClientRect().width;
|
|
90
|
+
const startX = event.clientX;
|
|
91
|
+
// Cap at the image's natural width so dragging out doesn't upscale
|
|
92
|
+
// past the source pixels (which just looks blurry).
|
|
93
|
+
const maxWidth = imgEl.naturalWidth || Infinity;
|
|
94
|
+
const minWidth = 24;
|
|
95
|
+
const onMove = (e) => {
|
|
96
|
+
const next = Math.max(minWidth, Math.min(maxWidth, startWidth + (e.clientX - startX)));
|
|
97
|
+
setPreviewWidth(Math.round(next));
|
|
98
|
+
};
|
|
99
|
+
const onUp = (e) => {
|
|
100
|
+
window.removeEventListener('mousemove', onMove);
|
|
101
|
+
window.removeEventListener('mouseup', onUp);
|
|
102
|
+
const finalWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + (e.clientX - startX)));
|
|
103
|
+
const naturalW = imgEl.naturalWidth;
|
|
104
|
+
const naturalH = imgEl.naturalHeight;
|
|
105
|
+
const w = Math.round(finalWidth);
|
|
106
|
+
const h = naturalW > 0 && naturalH > 0 ? Math.round((w * naturalH) / naturalW) : null;
|
|
107
|
+
setPreviewWidth(null);
|
|
108
|
+
updateAttributes({ width: w, height: h });
|
|
109
|
+
};
|
|
110
|
+
window.addEventListener('mousemove', onMove);
|
|
111
|
+
window.addEventListener('mouseup', onUp);
|
|
112
|
+
};
|
|
113
|
+
const resetSize = (event) => {
|
|
114
|
+
if (!canResize)
|
|
115
|
+
return;
|
|
116
|
+
event.preventDefault();
|
|
117
|
+
event.stopPropagation();
|
|
118
|
+
setPreviewWidth(null);
|
|
119
|
+
updateAttributes({ width: null, height: null });
|
|
120
|
+
};
|
|
121
|
+
const baseStyle = isThumbnail
|
|
122
|
+
? {
|
|
123
|
+
maxWidth: '100px',
|
|
124
|
+
maxHeight: '100px',
|
|
125
|
+
width: 'auto',
|
|
126
|
+
height: 'auto',
|
|
127
|
+
objectFit: 'contain',
|
|
128
|
+
display: 'block',
|
|
129
|
+
}
|
|
130
|
+
: effectiveWidth
|
|
131
|
+
? {
|
|
132
|
+
width: `${effectiveWidth}px`,
|
|
133
|
+
maxWidth: '100%',
|
|
134
|
+
height: 'auto',
|
|
135
|
+
display: 'block',
|
|
136
|
+
}
|
|
137
|
+
: { maxWidth: '100%', height: 'auto', display: 'block' };
|
|
138
|
+
return (_jsxs(NodeViewWrapper, { as: "figure",
|
|
139
|
+
// `data-drag-handle` tells ProseMirror that drags starting on this
|
|
140
|
+
// wrapper are NODE moves (not OS-level image drags). Without it,
|
|
141
|
+
// grabbing the inner `<img>` fires the browser's default image-drag
|
|
142
|
+
// behaviour: the picture is packaged as a virtual file in
|
|
143
|
+
// `dataTransfer.files`, the drop is treated as an external upload,
|
|
144
|
+
// and the source node is never removed — producing a duplicate.
|
|
145
|
+
// Combined with `draggable: true` in the node spec, this gives
|
|
146
|
+
// ProseMirror's default dropHandler a real internal move which
|
|
147
|
+
// preserves the `width`/`height` attrs and deletes the original.
|
|
148
|
+
draggable: true, "data-drag-handle": true, style: { margin: '0.5em 0', position: 'relative', display: 'inline-block', maxWidth: '100%' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx("img", { ref: imgRef, src: resolvedSrc, alt: alt || '', title: title || undefined, className: isThumbnail ? 'squisq-image squisq-image--thumbnail' : 'squisq-image', style: baseStyle,
|
|
149
|
+
// Disable the inner `<img>`'s native HTML5 drag so the gesture is
|
|
150
|
+
// captured by the wrapper's `data-drag-handle` instead. (Without
|
|
151
|
+
// this the browser still emits its own dragstart on the image
|
|
152
|
+
// and ProseMirror sees an external file drop.)
|
|
153
|
+
draggable: false, onDragStart: (e) => e.preventDefault(), "data-selected": selected ? 'true' : undefined }), showAffordance && (_jsxs("button", { type: "button", className: "squisq-image-edit-affordance", "data-testid": "image-edit-affordance",
|
|
154
|
+
// Stop the click from re-selecting the ProseMirror node and from
|
|
155
|
+
// bubbling to host handlers like file-drop overlays.
|
|
156
|
+
onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
|
|
157
|
+
e.preventDefault();
|
|
158
|
+
e.stopPropagation();
|
|
159
|
+
openImageEdit(src);
|
|
160
|
+
}, title: "Edit image", "aria-label": `Edit image ${alt || src}`, children: [_jsx("span", { "aria-hidden": "true", style: { fontSize: '0.95em', lineHeight: 1 }, children: "\u270E" }), _jsx("span", { children: "Edit" })] })), showResize && (_jsxs(_Fragment, { children: [_jsx("span", { className: "squisq-image-resize-handle", "data-testid": "image-resize-handle", onMouseDown: beginResize,
|
|
161
|
+
// Double-click clears the persisted width/height so the image
|
|
162
|
+
// returns to its natural rendered size.
|
|
163
|
+
onDoubleClick: resetSize, title: "Drag to resize \u00B7 double-click to reset", "aria-label": "Resize image", role: "separator" }), (previewWidth != null || width != null) && (_jsxs("span", { className: "squisq-image-resize-readout", "aria-hidden": "true", children: [Math.round(effectiveWidth ?? 0), "px"] }))] }))] }));
|
|
52
164
|
}
|
|
53
165
|
/**
|
|
54
166
|
* Image extension with a custom React NodeView that resolves URLs
|
|
55
|
-
* through the EditorContext's MediaProvider
|
|
167
|
+
* through the EditorContext's MediaProvider, plus author-controlled
|
|
168
|
+
* width/height attributes for in-editor resizing.
|
|
169
|
+
*
|
|
170
|
+
* When `width` (and optionally `height`) is set, the markdown serializer
|
|
171
|
+
* (`tiptapToMarkdown` in `tiptapBridge.ts`) emits an HTML `<img>` tag
|
|
172
|
+
* rather than the `` shorthand so dimensions survive a
|
|
173
|
+
* markdown ↔ WYSIWYG round-trip.
|
|
56
174
|
*/
|
|
57
175
|
export const ImageWithMediaProvider = Image.extend({
|
|
176
|
+
// Mark the node draggable so ProseMirror handles drag-to-reposition
|
|
177
|
+
// as an internal node move (preserves `width`/`height` attrs and
|
|
178
|
+
// removes the source node automatically). Combined with the
|
|
179
|
+
// `data-drag-handle` on the NodeViewWrapper, this is what makes the
|
|
180
|
+
// `moved` flag true in `handleDrop` so the editor's file-upload path
|
|
181
|
+
// doesn't fire on a drag-reorder.
|
|
182
|
+
draggable: true,
|
|
183
|
+
addAttributes() {
|
|
184
|
+
const parent = this.parent?.() ?? {};
|
|
185
|
+
return {
|
|
186
|
+
...parent,
|
|
187
|
+
width: {
|
|
188
|
+
default: null,
|
|
189
|
+
parseHTML: (element) => {
|
|
190
|
+
const raw = element.getAttribute('width');
|
|
191
|
+
if (!raw)
|
|
192
|
+
return null;
|
|
193
|
+
const n = parseInt(raw, 10);
|
|
194
|
+
return Number.isFinite(n) && n > 0 ? n : null;
|
|
195
|
+
},
|
|
196
|
+
renderHTML: (attrs) => attrs.width ? { width: String(attrs.width) } : {},
|
|
197
|
+
},
|
|
198
|
+
height: {
|
|
199
|
+
default: null,
|
|
200
|
+
parseHTML: (element) => {
|
|
201
|
+
const raw = element.getAttribute('height');
|
|
202
|
+
if (!raw)
|
|
203
|
+
return null;
|
|
204
|
+
const n = parseInt(raw, 10);
|
|
205
|
+
return Number.isFinite(n) && n > 0 ? n : null;
|
|
206
|
+
},
|
|
207
|
+
renderHTML: (attrs) => attrs.height ? { height: String(attrs.height) } : {},
|
|
208
|
+
},
|
|
209
|
+
};
|
|
210
|
+
},
|
|
58
211
|
addNodeView() {
|
|
59
212
|
return ReactNodeViewRenderer(ImageComponent);
|
|
60
213
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageNodeView.js","sourceRoot":"","sources":["../src/ImageNodeView.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"ImageNodeView.js","sourceRoot":"","sources":["../src/ImageNodeView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ImageViewer
|
|
3
|
+
*
|
|
4
|
+
* Read-only image viewer used when EditorShell runs in `image` file mode
|
|
5
|
+
* (PNG/JPEG/etc.). Renders a centered image that fits its container with
|
|
6
|
+
* a small overlay toolbar for fit / 100% / zoom in / zoom out, and a
|
|
7
|
+
* status row showing intrinsic dimensions and current zoom.
|
|
8
|
+
*
|
|
9
|
+
* Lifecycle of the `src` URL is the caller's responsibility — when fed a
|
|
10
|
+
* blob URL, the host should `URL.revokeObjectURL` on unmount or src change.
|
|
11
|
+
*
|
|
12
|
+
* Future image-editing actions (rotate, flip, crop) will slot in alongside
|
|
13
|
+
* the existing zoom controls.
|
|
14
|
+
*/
|
|
15
|
+
export interface ImageViewerProps {
|
|
16
|
+
/** Image source — typically a blob: URL the host owns and revokes. */
|
|
17
|
+
src: string;
|
|
18
|
+
/** Alt text for accessibility. Defaults to empty string (decorative). */
|
|
19
|
+
alt?: string;
|
|
20
|
+
/** Additional class name on the outer container. */
|
|
21
|
+
className?: string;
|
|
22
|
+
/** Color theme for the chrome around the image. */
|
|
23
|
+
theme?: 'light' | 'dark';
|
|
24
|
+
}
|
|
25
|
+
export declare function ImageViewer({ src, alt, className, theme }: ImageViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
//# sourceMappingURL=ImageViewer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAQD,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,GAAQ,EAAE,SAAS,EAAE,KAAe,EAAE,EAAE,gBAAgB,2CAyL1F"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* ImageViewer
|
|
4
|
+
*
|
|
5
|
+
* Read-only image viewer used when EditorShell runs in `image` file mode
|
|
6
|
+
* (PNG/JPEG/etc.). Renders a centered image that fits its container with
|
|
7
|
+
* a small overlay toolbar for fit / 100% / zoom in / zoom out, and a
|
|
8
|
+
* status row showing intrinsic dimensions and current zoom.
|
|
9
|
+
*
|
|
10
|
+
* Lifecycle of the `src` URL is the caller's responsibility — when fed a
|
|
11
|
+
* blob URL, the host should `URL.revokeObjectURL` on unmount or src change.
|
|
12
|
+
*
|
|
13
|
+
* Future image-editing actions (rotate, flip, crop) will slot in alongside
|
|
14
|
+
* the existing zoom controls.
|
|
15
|
+
*/
|
|
16
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
17
|
+
const MIN_ZOOM = 0.1;
|
|
18
|
+
const MAX_ZOOM = 16;
|
|
19
|
+
const ZOOM_STEP = 1.25;
|
|
20
|
+
export function ImageViewer({ src, alt = '', className, theme = 'light' }) {
|
|
21
|
+
const imgRef = useRef(null);
|
|
22
|
+
const stageRef = useRef(null);
|
|
23
|
+
const [naturalSize, setNaturalSize] = useState(null);
|
|
24
|
+
const [fitZoom, setFitZoom] = useState(1);
|
|
25
|
+
const [state, setState] = useState({ mode: 'fit' });
|
|
26
|
+
const [pan, setPan] = useState({ x: 0, y: 0 });
|
|
27
|
+
const [error, setError] = useState(null);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
setNaturalSize(null);
|
|
30
|
+
setState({ mode: 'fit' });
|
|
31
|
+
setPan({ x: 0, y: 0 });
|
|
32
|
+
setError(null);
|
|
33
|
+
}, [src]);
|
|
34
|
+
const recomputeFitZoom = useCallback(() => {
|
|
35
|
+
const stage = stageRef.current;
|
|
36
|
+
if (!stage || !naturalSize)
|
|
37
|
+
return;
|
|
38
|
+
const { clientWidth, clientHeight } = stage;
|
|
39
|
+
if (clientWidth === 0 || clientHeight === 0)
|
|
40
|
+
return;
|
|
41
|
+
const fit = Math.min(clientWidth / naturalSize.w, clientHeight / naturalSize.h, 1);
|
|
42
|
+
setFitZoom(fit > 0 ? fit : 1);
|
|
43
|
+
}, [naturalSize]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
recomputeFitZoom();
|
|
46
|
+
if (typeof ResizeObserver === 'undefined')
|
|
47
|
+
return;
|
|
48
|
+
const stage = stageRef.current;
|
|
49
|
+
if (!stage)
|
|
50
|
+
return;
|
|
51
|
+
const ro = new ResizeObserver(() => recomputeFitZoom());
|
|
52
|
+
ro.observe(stage);
|
|
53
|
+
return () => ro.disconnect();
|
|
54
|
+
}, [recomputeFitZoom]);
|
|
55
|
+
const handleLoad = useCallback(() => {
|
|
56
|
+
const img = imgRef.current;
|
|
57
|
+
if (!img)
|
|
58
|
+
return;
|
|
59
|
+
setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
|
|
60
|
+
}, []);
|
|
61
|
+
const handleError = useCallback(() => {
|
|
62
|
+
setError('Failed to load image');
|
|
63
|
+
}, []);
|
|
64
|
+
const effectiveZoom = state.mode === 'fit' ? fitZoom : state.zoom;
|
|
65
|
+
const setZoom = useCallback((next) => {
|
|
66
|
+
const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, next));
|
|
67
|
+
setState({ mode: 'manual', zoom: clamped });
|
|
68
|
+
}, []);
|
|
69
|
+
const onFit = useCallback(() => {
|
|
70
|
+
setState({ mode: 'fit' });
|
|
71
|
+
setPan({ x: 0, y: 0 });
|
|
72
|
+
}, []);
|
|
73
|
+
const onActual = useCallback(() => {
|
|
74
|
+
setZoom(1);
|
|
75
|
+
setPan({ x: 0, y: 0 });
|
|
76
|
+
}, [setZoom]);
|
|
77
|
+
const onZoomIn = useCallback(() => setZoom(effectiveZoom * ZOOM_STEP), [effectiveZoom, setZoom]);
|
|
78
|
+
const onZoomOut = useCallback(() => setZoom(effectiveZoom / ZOOM_STEP), [effectiveZoom, setZoom]);
|
|
79
|
+
const dragRef = useRef(null);
|
|
80
|
+
const onMouseDown = useCallback((e) => {
|
|
81
|
+
if (effectiveZoom <= fitZoom)
|
|
82
|
+
return;
|
|
83
|
+
dragRef.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
|
|
84
|
+
e.preventDefault();
|
|
85
|
+
}, [effectiveZoom, fitZoom, pan.x, pan.y]);
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
const onMove = (e) => {
|
|
88
|
+
const drag = dragRef.current;
|
|
89
|
+
if (!drag)
|
|
90
|
+
return;
|
|
91
|
+
setPan({
|
|
92
|
+
x: drag.panX + (e.clientX - drag.startX),
|
|
93
|
+
y: drag.panY + (e.clientY - drag.startY),
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
const onUp = () => {
|
|
97
|
+
dragRef.current = null;
|
|
98
|
+
};
|
|
99
|
+
window.addEventListener('mousemove', onMove);
|
|
100
|
+
window.addEventListener('mouseup', onUp);
|
|
101
|
+
return () => {
|
|
102
|
+
window.removeEventListener('mousemove', onMove);
|
|
103
|
+
window.removeEventListener('mouseup', onUp);
|
|
104
|
+
};
|
|
105
|
+
}, []);
|
|
106
|
+
const isPannable = effectiveZoom > fitZoom + 1e-6;
|
|
107
|
+
const imgStyle = naturalSize
|
|
108
|
+
? {
|
|
109
|
+
width: `${naturalSize.w * effectiveZoom}px`,
|
|
110
|
+
height: `${naturalSize.h * effectiveZoom}px`,
|
|
111
|
+
transform: `translate(${pan.x}px, ${pan.y}px)`,
|
|
112
|
+
}
|
|
113
|
+
: { maxWidth: '100%', maxHeight: '100%' };
|
|
114
|
+
const containerCls = ['squisq-image-viewer', `squisq-image-viewer--${theme}`, className]
|
|
115
|
+
.filter(Boolean)
|
|
116
|
+
.join(' ');
|
|
117
|
+
return (_jsxs("div", { className: containerCls, "data-testid": "image-viewer", children: [_jsxs("div", { ref: stageRef, className: "squisq-image-viewer-stage", onMouseDown: onMouseDown, style: { cursor: isPannable ? (dragRef.current ? 'grabbing' : 'grab') : 'default' }, children: [error ? (_jsx("div", { className: "squisq-image-viewer-error", children: error })) : (_jsx("img", { ref: imgRef, src: src, alt: alt, className: "squisq-image-viewer-img", style: imgStyle, onLoad: handleLoad, onError: handleError, draggable: false })), _jsxs("div", { className: "squisq-image-viewer-toolbar", children: [_jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onZoomOut, "aria-label": "Zoom out", title: "Zoom out", children: "\u2212" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onFit, "aria-pressed": state.mode === 'fit', title: "Fit to viewport", children: "Fit" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onActual, title: "Actual size (100%)", children: "100%" }), _jsx("button", { type: "button", className: "squisq-image-viewer-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: "+" })] })] }), _jsx("div", { className: "squisq-image-viewer-status", children: naturalSize ? (_jsxs(_Fragment, { children: [_jsxs("span", { children: [naturalSize.w, " \u00D7 ", naturalSize.h] }), _jsxs("span", { children: [Math.round(effectiveZoom * 100), "%"] })] })) : (_jsx("span", { children: "Loading\u2026" })) })] }));
|
|
118
|
+
}
|
|
119
|
+
//# sourceMappingURL=ImageViewer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageViewer.js","sourceRoot":"","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"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"}
|