@bendyline/squisq-editor-react 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/NOTICE.md +40 -0
- package/dist/index.d.ts +188 -55
- package/dist/index.js +5094 -2948
- package/dist/monaco.js +0 -1
- package/dist/styles/index.css +234 -145
- package/package.json +9 -6
- package/dist/index.js.map +0 -1
- package/dist/monaco.js.map +0 -1
- package/src/BlockCardView.tsx +0 -121
- package/src/BlockPreviewPanel.tsx +0 -69
- package/src/BlockPropertiesPopover.tsx +0 -222
- package/src/DocumentSettingsDialog.tsx +0 -272
- package/src/DropZoneOverlay.tsx +0 -137
- package/src/EditorContext.tsx +0 -1274
- package/src/EditorShell.tsx +0 -1358
- package/src/EmojiPicker.tsx +0 -332
- package/src/FolderView.tsx +0 -131
- package/src/Icon.tsx +0 -26
- package/src/ImageEditor.tsx +0 -395
- package/src/ImageNodeView.tsx +0 -284
- package/src/ImageViewer.tsx +0 -221
- package/src/InlineIcon.ts +0 -84
- package/src/InlinePreviewGutter.tsx +0 -590
- package/src/LinkDialog.tsx +0 -276
- package/src/MediaBin.tsx +0 -500
- package/src/MentionExtension.tsx +0 -261
- package/src/OutlinePanel.tsx +0 -547
- package/src/PlainHtmlPreview.tsx +0 -277
- package/src/PreviewControls.tsx +0 -1265
- package/src/PreviewPanel.tsx +0 -426
- package/src/RawEditor.tsx +0 -743
- package/src/RecorderEntry.tsx +0 -162
- package/src/StatusBar.tsx +0 -51
- package/src/TemplateAnnotation.ts +0 -167
- package/src/TemplateContentPreview.tsx +0 -56
- package/src/TemplatePicker.tsx +0 -1314
- package/src/ThemeCustomizerPanel.tsx +0 -304
- package/src/ThemePicker.tsx +0 -433
- package/src/TimelineBlockPreview.tsx +0 -37
- package/src/TimelineTrack.tsx +0 -671
- package/src/Toolbar.tsx +0 -2885
- package/src/Tooltip.tsx +0 -142
- package/src/TransitionPicker.tsx +0 -390
- package/src/VersionHistoryPanel.tsx +0 -359
- package/src/ViewMenuPanel.tsx +0 -189
- package/src/ViewSwitcher.tsx +0 -56
- package/src/WysiwygEditor.tsx +0 -806
- package/src/__tests__/blockProperties.test.ts +0 -92
- package/src/__tests__/blockPropertiesPopoverTheme.test.tsx +0 -33
- package/src/__tests__/blockRange.test.ts +0 -105
- package/src/__tests__/blockTagActivity.test.ts +0 -183
- package/src/__tests__/buildDocumentPreviewMarkdown.test.ts +0 -75
- package/src/__tests__/buildPreviewDocContent.test.ts +0 -65
- package/src/__tests__/buildPreviewDocTransition.test.ts +0 -92
- package/src/__tests__/canvasSurfaceTextEditing.test.tsx +0 -60
- package/src/__tests__/codeContextSectionView.test.tsx +0 -97
- package/src/__tests__/codeContextZoneManager.test.ts +0 -127
- package/src/__tests__/createShapeLayer.test.ts +0 -46
- package/src/__tests__/customLayoutManagerTheme.test.tsx +0 -34
- package/src/__tests__/detectMarkdown.test.ts +0 -73
- package/src/__tests__/diffContextSections.test.ts +0 -39
- package/src/__tests__/documentSettingsDialog.test.tsx +0 -197
- package/src/__tests__/drawingShapeRoundTrip.test.ts +0 -49
- package/src/__tests__/editorScrollHandoff.test.tsx +0 -102
- package/src/__tests__/editorScrollSync.test.ts +0 -65
- package/src/__tests__/editorShellCodeContext.test.tsx +0 -86
- package/src/__tests__/editorShellProps.test.tsx +0 -550
- package/src/__tests__/embeddedMedia.test.ts +0 -48
- package/src/__tests__/emojiPicker.test.tsx +0 -93
- package/src/__tests__/fileKind.test.ts +0 -112
- package/src/__tests__/findMode.test.tsx +0 -104
- package/src/__tests__/findModel.test.ts +0 -55
- package/src/__tests__/headingTransition.test.ts +0 -176
- package/src/__tests__/imageEditAffordance.test.tsx +0 -272
- package/src/__tests__/imageEditModalContract.test.tsx +0 -119
- package/src/__tests__/imageEditorShell.test.tsx +0 -94
- package/src/__tests__/imageEditorState.test.ts +0 -171
- package/src/__tests__/inlinePreviewGutter.test.tsx +0 -62
- package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx +0 -103
- package/src/__tests__/jsonEditor.test.tsx +0 -223
- package/src/__tests__/layersPanel.test.tsx +0 -167
- package/src/__tests__/layoutChildRoundTrip.test.ts +0 -71
- package/src/__tests__/linkDialogDocPicker.test.tsx +0 -137
- package/src/__tests__/majorApiTypes.test.ts +0 -26
- package/src/__tests__/markdownCodeFence.test.ts +0 -45
- package/src/__tests__/mediaAttachmentFlow.test.ts +0 -110
- package/src/__tests__/mediaBinDrop.test.tsx +0 -90
- package/src/__tests__/mediaReferences.test.ts +0 -97
- package/src/__tests__/narrationSave.test.ts +0 -148
- package/src/__tests__/outlinePanel.test.tsx +0 -169
- package/src/__tests__/outlineSource.test.ts +0 -217
- package/src/__tests__/plainHtmlPreview.test.tsx +0 -125
- package/src/__tests__/presentationMode.test.tsx +0 -290
- package/src/__tests__/previewControls.test.tsx +0 -571
- package/src/__tests__/previewPanelAudioFailure.test.tsx +0 -46
- package/src/__tests__/previewPanelPresentation.test.tsx +0 -126
- package/src/__tests__/previewPanelTransforms.test.tsx +0 -117
- package/src/__tests__/propertiesPanel.test.tsx +0 -69
- package/src/__tests__/rawEditorModelIsolation.test.ts +0 -19
- package/src/__tests__/recorderFormats.test.ts +0 -146
- package/src/__tests__/recorderMediaInsert.test.ts +0 -86
- package/src/__tests__/recorderTheme.test.tsx +0 -42
- package/src/__tests__/recorderTimingJson.test.ts +0 -41
- package/src/__tests__/resolveBlockVisual.test.ts +0 -43
- package/src/__tests__/selectionConversions.test.ts +0 -80
- package/src/__tests__/statusBar.test.tsx +0 -27
- package/src/__tests__/teleprompter.test.tsx +0 -190
- package/src/__tests__/templateAnnotationRoundTrip.test.ts +0 -99
- package/src/__tests__/templateContentPreview.test.ts +0 -101
- package/src/__tests__/templatePickerMetadata.test.ts +0 -32
- package/src/__tests__/templatePickerPortal.test.tsx +0 -62
- package/src/__tests__/timelineSource.test.ts +0 -134
- package/src/__tests__/tiptapBridge.test.ts +0 -575
- package/src/__tests__/tiptapBridgeConformance.test.ts +0 -47
- package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts +0 -109
- package/src/__tests__/tiptapImageRoundTrip.test.ts +0 -73
- package/src/__tests__/toolbarSelectionConversion.test.tsx +0 -190
- package/src/__tests__/tooltip.test.tsx +0 -72
- package/src/__tests__/transformStyleId.test.ts +0 -13
- package/src/__tests__/transitionCatalog.test.ts +0 -64
- package/src/__tests__/useBlockNavigator.test.tsx +0 -67
- package/src/__tests__/useImageEditor.test.tsx +0 -226
- package/src/__tests__/useJsonEditorTokens.test.ts +0 -59
- package/src/__tests__/useMediaRecorder.test.ts +0 -302
- package/src/__tests__/useTimelineClock.test.ts +0 -21
- package/src/__tests__/versionHistory.test.tsx +0 -197
- package/src/__tests__/viewMenuPanel.test.tsx +0 -130
- package/src/__tests__/writeCanvasSettings.test.ts +0 -15
- package/src/__tests__/wysiwygImageUpload.test.ts +0 -69
- package/src/__tests__/wysiwygTemplateBadgeFocus.test.tsx +0 -56
- package/src/asciiDiagram/AsciiDiagramExtension.ts +0 -343
- package/src/asciiDiagram/AsciiDiagramWidget.tsx +0 -254
- package/src/asciiDiagram/RepairableDiagramExtension.ts +0 -200
- package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts +0 -164
- package/src/asciiDiagram/__tests__/RepairableDiagramExtension.test.ts +0 -159
- package/src/asciiDiagram/__tests__/asciiDiagramCommands.test.ts +0 -284
- package/src/asciiDiagram/__tests__/asciiDiagramOps.test.ts +0 -114
- package/src/asciiDiagram/__tests__/asciiPaste.test.ts +0 -43
- package/src/asciiDiagram/asciiDiagramCommands.ts +0 -174
- package/src/asciiDiagram/asciiDiagramData.ts +0 -149
- package/src/asciiDiagram/asciiDiagramOps.ts +0 -238
- package/src/asciiDiagram/asciiPaste.ts +0 -19
- package/src/blockProperties.ts +0 -88
- package/src/blockRange.ts +0 -132
- package/src/blockSlice.ts +0 -75
- package/src/blockTagActivity.ts +0 -233
- package/src/buildDocumentPreviewMarkdown.ts +0 -168
- package/src/buildPreviewDoc.ts +0 -407
- package/src/codeContext/CodeContextSectionView.tsx +0 -124
- package/src/codeContext/CodeContextZoneManager.ts +0 -149
- package/src/codeContext/CodeContextZones.tsx +0 -121
- package/src/codeContext/diffContextSections.ts +0 -38
- package/src/codeContext/types.ts +0 -75
- package/src/codeSnippet/CodeSnippetExtension.ts +0 -205
- package/src/codeSnippet/CodeSnippetWidget.tsx +0 -109
- package/src/codeSnippet/__tests__/CodeSnippetExtension.test.ts +0 -95
- package/src/codeSnippet/__tests__/codeSnippetLanguages.test.ts +0 -50
- package/src/codeSnippet/codeSnippetCommands.ts +0 -21
- package/src/codeSnippet/codeSnippetData.ts +0 -43
- package/src/codeSnippet/codeSnippetLanguages.ts +0 -216
- package/src/customTemplates/AddBin.tsx +0 -126
- package/src/customTemplates/CustomLayoutManager.tsx +0 -234
- package/src/customTemplates/CustomTemplateContext.tsx +0 -188
- package/src/customTemplates/LayerToolbar.tsx +0 -580
- package/src/customTemplates/ShapeGlyph.tsx +0 -47
- package/src/customTemplates/TemplateDesigner.tsx +0 -433
- package/src/customTemplates/__tests__/library.test.ts +0 -96
- package/src/customTemplates/__tests__/normalizePositions.test.ts +0 -109
- package/src/customTemplates/__tests__/shapeDefs.test.ts +0 -49
- package/src/customTemplates/__tests__/useMemoryLayerAdapter.test.ts +0 -108
- package/src/customTemplates/designer.css +0 -732
- package/src/customTemplates/index.ts +0 -31
- package/src/customTemplates/library.ts +0 -110
- package/src/customTemplates/normalizePositions.ts +0 -75
- package/src/customTemplates/shapeDefs.ts +0 -131
- package/src/customTemplates/thumbnail.tsx +0 -63
- package/src/customTemplates/tokenDefs.ts +0 -60
- package/src/customTemplates/useDocCustomTemplates.ts +0 -52
- package/src/customTemplates/useMemoryLayerAdapter.ts +0 -129
- package/src/customThemes/CustomThemeContext.tsx +0 -185
- package/src/customThemes/CustomThemeDialog.tsx +0 -316
- package/src/customThemes/ImportThemeSection.tsx +0 -178
- package/src/customThemes/__tests__/CustomThemeContext.test.tsx +0 -64
- package/src/customThemes/__tests__/CustomThemeDialog.test.tsx +0 -47
- package/src/customThemes/__tests__/customThemeLibrary.test.ts +0 -60
- package/src/customThemes/__tests__/importThemeSection.test.tsx +0 -192
- package/src/customThemes/customThemeLibrary.ts +0 -100
- package/src/customThemes/index.ts +0 -37
- package/src/customThemes/themeControls.tsx +0 -229
- package/src/customThemes/themeDraft.ts +0 -288
- package/src/customThemes/useDocCustomThemes.ts +0 -49
- package/src/detectMarkdown.ts +0 -62
- package/src/diagram/DiagramCanvas.tsx +0 -260
- package/src/diagram/DiagramMaximizedOverlay.tsx +0 -46
- package/src/diagram/diagramCommands.ts +0 -604
- package/src/diagram/diagramConstants.ts +0 -17
- package/src/diagram/types.ts +0 -35
- package/src/editorScrollSync.ts +0 -73
- package/src/embeddedMedia.ts +0 -78
- package/src/emojiData.ts +0 -1317
- package/src/fileKind.ts +0 -158
- package/src/find/FindHighlightExtension.ts +0 -81
- package/src/find/FindToolbar.tsx +0 -314
- package/src/find/findModel.ts +0 -77
- package/src/frontmatter.ts +0 -29
- package/src/frontmatterSettings.ts +0 -23
- package/src/headingTransition.ts +0 -291
- package/src/hooks/useFileDrop.ts +0 -266
- package/src/imageEditor/CanvasSurface.tsx +0 -703
- package/src/imageEditor/ImageVersionHistoryDropdown.tsx +0 -396
- package/src/imageEditor/LayersPanel.tsx +0 -218
- package/src/imageEditor/PropertiesPanel.tsx +0 -474
- package/src/imageEditor/Toolbar.tsx +0 -459
- package/src/imageEditor/createShapeLayer.ts +0 -280
- package/src/imageEditor/icons.tsx +0 -68
- package/src/imageEditor/image-editor.css +0 -574
- package/src/imageEditor/layers/EditorImageLayer.tsx +0 -45
- package/src/imageEditor/layers/EditorShapeLayer.tsx +0 -62
- package/src/imageEditor/layers/EditorTextLayer.tsx +0 -45
- package/src/imageEditor/layers/SelectionHandles.tsx +0 -86
- package/src/imageEditor/state.ts +0 -173
- package/src/imageEditor/useImageEditor.ts +0 -385
- package/src/imageEditor/useImageEditorTokens.ts +0 -70
- package/src/index.ts +0 -559
- package/src/jsonEditor/EmbeddedRichTextField.tsx +0 -81
- package/src/jsonEditor/JsonEditor.tsx +0 -81
- package/src/jsonEditor/JsonEditorContext.tsx +0 -81
- package/src/jsonEditor/RenderNode.tsx +0 -87
- package/src/jsonEditor/editors.tsx +0 -745
- package/src/jsonEditor/index.ts +0 -2
- package/src/jsonEditor/json-editor.css +0 -463
- package/src/jsonEditor/useJsonEditorTokens.ts +0 -33
- package/src/markdownCodeFence.ts +0 -72
- package/src/mediaDragMime.ts +0 -32
- package/src/mediaEntries.ts +0 -12
- package/src/mediaReferences.ts +0 -301
- package/src/mermaid/MermaidDiagramCanvas.tsx +0 -693
- package/src/mermaid/MermaidDiagramExtension.ts +0 -243
- package/src/mermaid/MermaidDiagramTypeThumbnail.tsx +0 -184
- package/src/mermaid/MermaidDiagramWidget.tsx +0 -653
- package/src/mermaid/MermaidShapePalette.tsx +0 -245
- package/src/mermaid/__tests__/MermaidDiagramExtension.test.ts +0 -361
- package/src/mermaid/__tests__/mermaidDiagramTypes.test.ts +0 -35
- package/src/mermaid/__tests__/mermaidRenderer.test.ts +0 -49
- package/src/mermaid/__tests__/mermaidSourceOps.test.ts +0 -213
- package/src/mermaid/__tests__/mermaidSyntax.test.ts +0 -71
- package/src/mermaid/mermaidCommands.ts +0 -34
- package/src/mermaid/mermaidData.ts +0 -31
- package/src/mermaid/mermaidDiagramTypes.ts +0 -325
- package/src/mermaid/mermaidModel.ts +0 -31
- package/src/mermaid/mermaidRenderer.ts +0 -181
- package/src/mermaid/mermaidShapes.ts +0 -113
- package/src/mermaid/mermaidSourceOps.ts +0 -454
- package/src/monaco.ts +0 -35
- package/src/monacoWorkers.ts +0 -89
- package/src/outlineSource.ts +0 -171
- package/src/presentation/PresentationMode.tsx +0 -596
- package/src/rawEditorIsolation.ts +0 -18
- package/src/recorder/RecorderButton.tsx +0 -80
- package/src/recorder/RecorderModal.tsx +0 -706
- package/src/recorder/RecorderPanel.tsx +0 -77
- package/src/recorder/formats.ts +0 -159
- package/src/recorder/hooks/useMediaRecorder.ts +0 -436
- package/src/recorder/hooks/useStreamPreview.ts +0 -47
- package/src/recorder/insertMediaBlock.ts +0 -30
- package/src/recorder/sources/cameraStream.ts +0 -32
- package/src/recorder/sources/micStream.ts +0 -25
- package/src/recorder/sources/screenStream.ts +0 -162
- package/src/recorder/timingJson.ts +0 -66
- package/src/resolveBlockVisual.ts +0 -39
- package/src/scene/Scene.tsx +0 -647
- package/src/scene/SceneBlockExtension.ts +0 -205
- package/src/scene/SceneBlockToolbar.tsx +0 -216
- package/src/scene/SceneBlockWidget.tsx +0 -441
- package/src/scene/ScenePropsBar.tsx +0 -85
- package/src/scene/SceneSelection.tsx +0 -111
- package/src/scene/SceneSideToolbar.tsx +0 -89
- package/src/scene/SceneViewControls.tsx +0 -43
- package/src/scene/SceneViewport.tsx +0 -106
- package/src/scene/ShapePalette.tsx +0 -196
- package/src/scene/__tests__/DiagramAdapter.test.ts +0 -142
- package/src/scene/__tests__/SceneBlockExtension.test.ts +0 -33
- package/src/scene/__tests__/bezierEdit.test.ts +0 -85
- package/src/scene/__tests__/blockLayers.test.ts +0 -57
- package/src/scene/__tests__/fitScale.test.ts +0 -19
- package/src/scene/__tests__/sceneIsolation.test.tsx +0 -119
- package/src/scene/__tests__/shapeLayers.test.ts +0 -106
- package/src/scene/__tests__/useSceneHitTest.test.ts +0 -90
- package/src/scene/__tests__/useScenePanZoom.test.ts +0 -130
- package/src/scene/adapters/DiagramAdapter.ts +0 -79
- package/src/scene/adapters/DrawingAdapter.ts +0 -420
- package/src/scene/adapters/LayoutAdapter.ts +0 -313
- package/src/scene/adapters/blockLayers.ts +0 -159
- package/src/scene/commands/SceneCommand.ts +0 -84
- package/src/scene/commands/drawingCommands.ts +0 -318
- package/src/scene/commands/layoutCommands.ts +0 -301
- package/src/scene/fitScale.ts +0 -17
- package/src/scene/hooks/useSceneHitTest.ts +0 -105
- package/src/scene/hooks/useScenePanZoom.ts +0 -154
- package/src/scene/hooks/useSceneSelection.ts +0 -62
- package/src/scene/index.ts +0 -90
- package/src/scene/layers/DiagramEdges.tsx +0 -142
- package/src/scene/layers/edgeGeometry.ts +0 -104
- package/src/scene/layers/nodeCard.tsx +0 -164
- package/src/scene/layers/renderLayer.tsx +0 -70
- package/src/scene/layers/shapeLayers.ts +0 -201
- package/src/scene/paths/bezierEdit.ts +0 -208
- package/src/scene/scene.css +0 -874
- package/src/scene/text/SceneTextOverlay.tsx +0 -161
- package/src/scene/text/sceneTextChannel.ts +0 -46
- package/src/scene/text/sceneTextConfig.ts +0 -31
- package/src/scene/text/sceneTiptap.ts +0 -36
- package/src/scene/text/useSceneTextEditing.ts +0 -39
- package/src/scene/tools/ConnectTool.ts +0 -209
- package/src/scene/tools/DrawingConnectTool.ts +0 -231
- package/src/scene/tools/PathTool.ts +0 -158
- package/src/scene/tools/PlaceTool.ts +0 -47
- package/src/scene/tools/SceneTool.ts +0 -85
- package/src/scene/tools/SelectTool.ts +0 -300
- package/src/scene/tools/ShapeTool.ts +0 -143
- package/src/scene/tools/TextTool.ts +0 -72
- package/src/scene/tools/TokenTool.ts +0 -95
- package/src/scene/tools/createDrawShapeTool.ts +0 -82
- package/src/selectionConversions.ts +0 -155
- package/src/styles/ascii-diagram.css +0 -79
- package/src/styles/ascii-timeline.css +0 -596
- package/src/styles/code-context.css +0 -155
- package/src/styles/code-snippet.css +0 -76
- package/src/styles/diagram.css +0 -183
- package/src/styles/editor.css +0 -7131
- package/src/styles/folder-view.css +0 -210
- package/src/styles/image-edit-affordance.css +0 -201
- package/src/styles/index.css +0 -20
- package/src/styles/mermaid-diagram.css +0 -487
- package/src/styles/tree-view.css +0 -189
- package/src/teleprompter/TeleprompterControls.tsx +0 -218
- package/src/teleprompter/TeleprompterSelfView.tsx +0 -22
- package/src/teleprompter/TeleprompterSurface.tsx +0 -267
- package/src/teleprompter/TeleprompterView.tsx +0 -338
- package/src/teleprompter/canvasRenderer.ts +0 -161
- package/src/teleprompter/floatingWindow.ts +0 -352
- package/src/teleprompter/index.ts +0 -61
- package/src/teleprompter/pcmWorklet.ts +0 -62
- package/src/teleprompter/recording/insertPreamble.ts +0 -80
- package/src/teleprompter/recording/narrationSave.ts +0 -134
- package/src/teleprompter/recording/useNarrationRecorder.ts +0 -367
- package/src/teleprompter/scrollModel.ts +0 -85
- package/src/teleprompter/teleprompterTheme.ts +0 -303
- package/src/teleprompter/types.ts +0 -38
- package/src/teleprompter/useFloatingWindow.ts +0 -74
- package/src/teleprompter/useMicAnalysis.ts +0 -211
- package/src/teleprompter/useTeleprompter.ts +0 -421
- package/src/templateContentPreviewResolver.ts +0 -360
- package/src/timeline/TimelineEditorWidget.tsx +0 -861
- package/src/timeline/TimelineViewExtension.ts +0 -252
- package/src/timeline/__tests__/TimelineEditorWidget.test.tsx +0 -414
- package/src/timeline/__tests__/TimelineViewExtension.test.ts +0 -163
- package/src/timeline/__tests__/timelineCommands.test.ts +0 -359
- package/src/timeline/__tests__/timelineOps.test.ts +0 -277
- package/src/timeline/__tests__/timelinePaste.test.ts +0 -34
- package/src/timeline/timelineCommands.ts +0 -421
- package/src/timeline/timelineData.ts +0 -54
- package/src/timeline/timelineOps.ts +0 -381
- package/src/timeline/timelinePaste.ts +0 -8
- package/src/timelineSource.ts +0 -244
- package/src/tiptap/TiptapAudio.tsx +0 -86
- package/src/tiptap/TiptapVideo.tsx +0 -119
- package/src/tiptap/useResolvedMediaSrc.ts +0 -47
- package/src/tiptapBridge.ts +0 -986
- package/src/tooltipPlacement.ts +0 -13
- package/src/transformStyleId.ts +0 -17
- package/src/transitionCatalog.ts +0 -159
- package/src/treeview/TreeOutlineWidget.tsx +0 -390
- package/src/treeview/TreeViewExtension.ts +0 -250
- package/src/treeview/__tests__/TreeOutlineWidget.test.tsx +0 -156
- package/src/treeview/__tests__/TreeViewExtension.test.ts +0 -122
- package/src/treeview/__tests__/treeOps.test.ts +0 -177
- package/src/treeview/__tests__/treePaste.test.ts +0 -40
- package/src/treeview/__tests__/treeViewCommands.test.ts +0 -179
- package/src/treeview/treeOps.ts +0 -231
- package/src/treeview/treePaste.ts +0 -13
- package/src/treeview/treeViewCommands.ts +0 -99
- package/src/treeview/treeViewData.ts +0 -41
- package/src/types/monaco-shims.d.ts +0 -10
- package/src/useBlockNavigator.ts +0 -153
- package/src/useHeadingLayout.ts +0 -294
- package/src/useMonacoLoader.ts +0 -82
- package/src/useTimelineClock.ts +0 -76
- package/src/utils/collectInlineFontAwesomeCss.ts +0 -69
- package/src/utils/dropUtils.ts +0 -136
- package/src/utils/normalizeMalformedAssetUrl.ts +0 -22
- package/src/writeCanvasSettings.ts +0 -30
- package/src/wysiwygImageUpload.ts +0 -113
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
-
import { createPortal } from 'react-dom';
|
|
3
|
-
import { useEditorContext } from '../EditorContext';
|
|
4
|
-
import { CodeContextZoneManager } from './CodeContextZoneManager';
|
|
5
|
-
import { CodeContextSectionView } from './CodeContextSectionView';
|
|
6
|
-
import type { ZoneSpec } from './diffContextSections';
|
|
7
|
-
import type { CodeContext, CodeContextSection } from './types';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Bridges a host-supplied {@link CodeContext} onto the live Monaco editor:
|
|
11
|
-
* owns a {@link CodeContextZoneManager} per editor instance, reconciles zones
|
|
12
|
-
* when the context prop changes, and portals a `CodeContextSectionView` into
|
|
13
|
-
* each zone's dom node. Mounted by EditorShell in code mode; also exported
|
|
14
|
-
* for hosts composing a custom shell around `RawEditor`.
|
|
15
|
-
*/
|
|
16
|
-
export function CodeContextZones({ options }: { options: CodeContext }) {
|
|
17
|
-
const { monacoEditor } = useEditorContext();
|
|
18
|
-
const [manager, setManager] = useState<CodeContextZoneManager | null>(null);
|
|
19
|
-
// Bumped whenever the zone set changes so portals rebuild.
|
|
20
|
-
const [, setZonesVersion] = useState(0);
|
|
21
|
-
// Expansion state per section id: seeded from defaultExpanded the first
|
|
22
|
-
// time an id appears; the user's toggle wins afterwards.
|
|
23
|
-
const [expandedById, setExpandedById] = useState<Record<string, boolean>>({});
|
|
24
|
-
const seenIds = useRef(new Set<string>());
|
|
25
|
-
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (!monacoEditor) return;
|
|
28
|
-
const mgr = new CodeContextZoneManager(monacoEditor);
|
|
29
|
-
const off = mgr.onDidChangeZones(() => setZonesVersion((v) => v + 1));
|
|
30
|
-
setManager(mgr);
|
|
31
|
-
return () => {
|
|
32
|
-
off();
|
|
33
|
-
mgr.dispose();
|
|
34
|
-
setManager(null);
|
|
35
|
-
};
|
|
36
|
-
}, [monacoEditor]);
|
|
37
|
-
|
|
38
|
-
const fileTop = options.fileTop;
|
|
39
|
-
const sections = options.sections;
|
|
40
|
-
|
|
41
|
-
// Resolved render list: fileTop pinned above line 1 at ordinal 0, then the
|
|
42
|
-
// host's sections in array order.
|
|
43
|
-
const resolved = useMemo(() => {
|
|
44
|
-
const out: Array<{ spec: ZoneSpec; section: Omit<CodeContextSection, 'line'> }> = [];
|
|
45
|
-
if (fileTop) {
|
|
46
|
-
out.push({ spec: { id: fileTop.id, line: 0, ordinal: 0 }, section: fileTop });
|
|
47
|
-
}
|
|
48
|
-
sections?.forEach((s, i) => {
|
|
49
|
-
out.push({ spec: { id: s.id, line: s.line, ordinal: i + 1 }, section: s });
|
|
50
|
-
});
|
|
51
|
-
return out;
|
|
52
|
-
}, [fileTop, sections]);
|
|
53
|
-
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
if (!manager) return;
|
|
56
|
-
manager.sync(resolved.map((r) => r.spec));
|
|
57
|
-
// Seed expansion defaults for ids we haven't seen before (sections can
|
|
58
|
-
// arrive after mount).
|
|
59
|
-
setExpandedById((prev) => {
|
|
60
|
-
let next: Record<string, boolean> | null = null;
|
|
61
|
-
for (const { section } of resolved) {
|
|
62
|
-
if (seenIds.current.has(section.id)) continue;
|
|
63
|
-
seenIds.current.add(section.id);
|
|
64
|
-
if (section.defaultExpanded) {
|
|
65
|
-
next = next ?? { ...prev };
|
|
66
|
-
next[section.id] = true;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
return next ?? prev;
|
|
70
|
-
});
|
|
71
|
-
}, [manager, resolved]);
|
|
72
|
-
|
|
73
|
-
const onToggleSection = options.onToggleSection;
|
|
74
|
-
const handleToggle = useCallback(
|
|
75
|
-
(id: string) => {
|
|
76
|
-
setExpandedById((prev) => {
|
|
77
|
-
const expanded = !prev[id];
|
|
78
|
-
onToggleSection?.(id, expanded);
|
|
79
|
-
return { ...prev, [id]: expanded };
|
|
80
|
-
});
|
|
81
|
-
},
|
|
82
|
-
[onToggleSection],
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
const handleMeasure = useCallback(
|
|
86
|
-
(id: string, px: number) => manager?.setHeight(id, px),
|
|
87
|
-
[manager],
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
const handleRevealLine = useCallback(
|
|
91
|
-
(line: number) => {
|
|
92
|
-
monacoEditor?.revealLineInCenter(line);
|
|
93
|
-
monacoEditor?.setPosition({ lineNumber: line, column: 1 });
|
|
94
|
-
},
|
|
95
|
-
[monacoEditor],
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
if (!manager) return null;
|
|
99
|
-
return (
|
|
100
|
-
<>
|
|
101
|
-
{resolved.map(({ section }) => {
|
|
102
|
-
const domNode = manager.getDomNode(section.id);
|
|
103
|
-
if (!domNode) return null;
|
|
104
|
-
return createPortal(
|
|
105
|
-
<CodeContextSectionView
|
|
106
|
-
key={section.id}
|
|
107
|
-
section={section}
|
|
108
|
-
expanded={!!expandedById[section.id]}
|
|
109
|
-
onToggle={handleToggle}
|
|
110
|
-
linkSchemes={options.linkSchemes}
|
|
111
|
-
onLinkClick={options.onLinkClick}
|
|
112
|
-
onRevealLine={handleRevealLine}
|
|
113
|
-
onMeasure={handleMeasure}
|
|
114
|
-
/>,
|
|
115
|
-
domNode,
|
|
116
|
-
section.id,
|
|
117
|
-
);
|
|
118
|
-
})}
|
|
119
|
-
</>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Pure reconciler for context-section zones. Diffs the previous resolved spec
|
|
3
|
-
* list against the next by section id, so the zone layer can apply one
|
|
4
|
-
* changeViewZones batch: create `add`, delete `remove`, and re-anchor `move`
|
|
5
|
-
* (same id, different line or ordinal). Content-only changes are not the zone
|
|
6
|
-
* layer's business — React re-renders the portal and the resize observer
|
|
7
|
-
* corrects the height.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
export interface ZoneSpec {
|
|
11
|
-
id: string;
|
|
12
|
-
/** 1-based anchor line (0 = file-top, above line 1). */
|
|
13
|
-
line: number;
|
|
14
|
-
/** Stable order among zones sharing an anchor line. */
|
|
15
|
-
ordinal: number;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export interface ZoneDiff {
|
|
19
|
-
add: ZoneSpec[];
|
|
20
|
-
remove: string[];
|
|
21
|
-
move: ZoneSpec[];
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export function diffContextSections(prev: ZoneSpec[], next: ZoneSpec[]): ZoneDiff {
|
|
25
|
-
const prevById = new Map(prev.map((z) => [z.id, z]));
|
|
26
|
-
const nextIds = new Set<string>();
|
|
27
|
-
const add: ZoneSpec[] = [];
|
|
28
|
-
const move: ZoneSpec[] = [];
|
|
29
|
-
for (const spec of next) {
|
|
30
|
-
if (nextIds.has(spec.id)) continue; // duplicate id — first occurrence wins
|
|
31
|
-
nextIds.add(spec.id);
|
|
32
|
-
const before = prevById.get(spec.id);
|
|
33
|
-
if (!before) add.push(spec);
|
|
34
|
-
else if (before.line !== spec.line || before.ordinal !== spec.ordinal) move.push(spec);
|
|
35
|
-
}
|
|
36
|
-
const remove = prev.filter((z) => !nextIds.has(z.id)).map((z) => z.id);
|
|
37
|
-
return { add, remove, move };
|
|
38
|
-
}
|
package/src/codeContext/types.ts
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Host-supplied context sections rendered INSIDE the Monaco (raw/code)
|
|
3
|
-
* surface: collapsible markdown blurbs injected above anchor lines, plus an
|
|
4
|
-
* optional file-top summary. Squisq stays host-agnostic — anchors are plain
|
|
5
|
-
* line numbers, ids are opaque strings, links are intercepted via callback.
|
|
6
|
-
*
|
|
7
|
-
* Accessibility note: Monaco marks its view-zone layer `aria-hidden`, so
|
|
8
|
-
* sections are invisible to screen readers in v1.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* One host-supplied markdown blurb anchored above a line of the code buffer.
|
|
13
|
-
* Rendered as a compact one-line strip that expands in place to the full
|
|
14
|
-
* markdown body.
|
|
15
|
-
*/
|
|
16
|
-
export interface CodeContextSection {
|
|
17
|
-
/**
|
|
18
|
-
* Stable identity used to reconcile zones across prop updates — e.g. a
|
|
19
|
-
* symbol id like 'resolveImportEdges@60'. Zones are diffed by id: same id +
|
|
20
|
-
* new line moves the zone; same id + new markdown re-renders in place; a
|
|
21
|
-
* new id creates a new zone.
|
|
22
|
-
*/
|
|
23
|
-
id: string;
|
|
24
|
-
/**
|
|
25
|
-
* 1-based line the section renders ABOVE. Out-of-range values are clamped
|
|
26
|
-
* by Monaco. In editable buffers the zone rides Monaco's whitespace
|
|
27
|
-
* semantics — it shifts as lines are inserted/deleted above it and
|
|
28
|
-
* collapses onto the previous line if its anchor lines are deleted. Squisq
|
|
29
|
-
* never re-derives anchors from edits; the host re-supplies lines when it
|
|
30
|
-
* re-analyzes the file.
|
|
31
|
-
*/
|
|
32
|
-
line: number;
|
|
33
|
-
/**
|
|
34
|
-
* Compact markdown for the collapsed strip. Rendered on one line (block
|
|
35
|
-
* structure flattened, overflow ellipsized). Links work here too and go
|
|
36
|
-
* through `onLinkClick`.
|
|
37
|
-
*/
|
|
38
|
-
summaryMarkdown: string;
|
|
39
|
-
/**
|
|
40
|
-
* Full markdown body shown when expanded. Omit while still loading — the
|
|
41
|
-
* expanded view shows a muted loading row and fills in when a later prop
|
|
42
|
-
* update supplies it.
|
|
43
|
-
*/
|
|
44
|
-
markdown?: string;
|
|
45
|
-
/** Start expanded. The user's toggle wins after first interaction. Default false. */
|
|
46
|
-
defaultExpanded?: boolean;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/** The full context dictionary passed to `EditorShell.codeContext`. */
|
|
50
|
-
export interface CodeContext {
|
|
51
|
-
/**
|
|
52
|
-
* Section pinned above line 1 (file summary). Rendered before any line-1
|
|
53
|
-
* `sections` entry. `line` is implicit.
|
|
54
|
-
*/
|
|
55
|
-
fileTop?: Omit<CodeContextSection, 'line'>;
|
|
56
|
-
/** Line-anchored sections. Array order is preserved for equal lines. */
|
|
57
|
-
sections?: CodeContextSection[];
|
|
58
|
-
/**
|
|
59
|
-
* Extra URI schemes section links may use (e.g. `['workspace-nav']`).
|
|
60
|
-
* http/https/mailto/tel are always allowed; executable schemes
|
|
61
|
-
* (javascript:, data:) are never allowed regardless.
|
|
62
|
-
*/
|
|
63
|
-
linkSchemes?: readonly string[];
|
|
64
|
-
/**
|
|
65
|
-
* Intercepts link clicks inside sections, receiving the href exactly as
|
|
66
|
-
* authored in the markdown. Return `false` to let the browser's default
|
|
67
|
-
* navigation proceed; any other return (or void) suppresses it. Fragment
|
|
68
|
-
* links of the form `#L<digits>` are handled natively by squisq (reveal
|
|
69
|
-
* that line in the editor) and never reach this callback. When omitted:
|
|
70
|
-
* http(s)/mailto links open normally, custom-scheme links do nothing.
|
|
71
|
-
*/
|
|
72
|
-
onLinkClick?: (href: string, meta: { sectionId: string }) => boolean | undefined;
|
|
73
|
-
/** Notified on expand/collapse — lets hosts lazy-load bodies on first expand. */
|
|
74
|
-
onToggleSection?: (sectionId: string, expanded: boolean) => void;
|
|
75
|
-
}
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tiptap extension for ordinary explicit-language code fences.
|
|
3
|
-
*
|
|
4
|
-
* The ProseMirror code block remains authoritative. This plugin hides it and
|
|
5
|
-
* mounts a Monaco editor whose edits rewrite only the node's text content, so
|
|
6
|
-
* fence language and source round-trip through Markdown without a parallel model.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { Extension } from '@tiptap/core';
|
|
10
|
-
import type { Node as PMNode } from '@tiptap/pm/model';
|
|
11
|
-
import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state';
|
|
12
|
-
import { Decoration, DecorationSet } from '@tiptap/pm/view';
|
|
13
|
-
import type { Editor } from '@tiptap/react';
|
|
14
|
-
import { createElement } from 'react';
|
|
15
|
-
import { createRoot, type Root } from 'react-dom/client';
|
|
16
|
-
import { CodeSnippetWidget } from './CodeSnippetWidget';
|
|
17
|
-
import { isCodeSnippetFenceLanguage } from './codeSnippetLanguages';
|
|
18
|
-
|
|
19
|
-
export interface CodeSnippetBlockEntry {
|
|
20
|
-
/** Synthetic session id, stable while this code block remains in the doc. */
|
|
21
|
-
id: string;
|
|
22
|
-
/** Current ProseMirror position of the `codeBlock`. */
|
|
23
|
-
pos: number;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export interface CodeSnippetPluginState {
|
|
27
|
-
entries: CodeSnippetBlockEntry[];
|
|
28
|
-
decorations: DecorationSet;
|
|
29
|
-
seq: number;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export interface CodeSnippetExtensionOptions {
|
|
33
|
-
/** When false, leave all ordinary language-tagged fences as code blocks. */
|
|
34
|
-
enabled?: boolean;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export const CODE_SNIPPET_KEY = new PluginKey<CodeSnippetPluginState>('squisq-code-snippet');
|
|
38
|
-
|
|
39
|
-
export function isCodeSnippetNode(node: PMNode): boolean {
|
|
40
|
-
const language = (node.attrs as { language?: unknown }).language;
|
|
41
|
-
return (
|
|
42
|
-
node.type.name === 'codeBlock' &&
|
|
43
|
-
isCodeSnippetFenceLanguage(typeof language === 'string' ? language : null)
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export function findCodeSnippetBlockPos(editor: Editor, blockId: string): number | null {
|
|
48
|
-
const state = CODE_SNIPPET_KEY.getState(editor.state);
|
|
49
|
-
return state?.entries.find((entry) => entry.id === blockId)?.pos ?? null;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
interface WidgetRootRef {
|
|
53
|
-
root: Root;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function buildDecorations(
|
|
57
|
-
doc: PMNode,
|
|
58
|
-
entries: readonly CodeSnippetBlockEntry[],
|
|
59
|
-
editor: Editor,
|
|
60
|
-
): DecorationSet {
|
|
61
|
-
const decorations: Decoration[] = [];
|
|
62
|
-
for (const entry of entries) {
|
|
63
|
-
const node = doc.nodeAt(entry.pos);
|
|
64
|
-
if (!node || !isCodeSnippetNode(node)) continue;
|
|
65
|
-
decorations.push(
|
|
66
|
-
Decoration.node(entry.pos, entry.pos + node.nodeSize, {
|
|
67
|
-
class: 'squisq-code-snippet-fence-hidden',
|
|
68
|
-
}),
|
|
69
|
-
);
|
|
70
|
-
const blockId = entry.id;
|
|
71
|
-
decorations.push(
|
|
72
|
-
Decoration.widget(
|
|
73
|
-
entry.pos + node.nodeSize,
|
|
74
|
-
(view) => {
|
|
75
|
-
const container = document.createElement('div');
|
|
76
|
-
container.className = 'squisq-code-snippet-widget-host';
|
|
77
|
-
container.contentEditable = 'false';
|
|
78
|
-
container.addEventListener('mousedown', (event) => event.stopPropagation());
|
|
79
|
-
container.addEventListener('keydown', (event) => event.stopPropagation());
|
|
80
|
-
const root = createRoot(container);
|
|
81
|
-
root.render(
|
|
82
|
-
createElement(CodeSnippetWidget, {
|
|
83
|
-
editor,
|
|
84
|
-
blockId,
|
|
85
|
-
host: view.dom.parentElement ?? view.dom,
|
|
86
|
-
}),
|
|
87
|
-
);
|
|
88
|
-
(
|
|
89
|
-
container as HTMLElement & { __squisqCodeSnippetRoot?: WidgetRootRef }
|
|
90
|
-
).__squisqCodeSnippetRoot = { root };
|
|
91
|
-
return container;
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
destroy: (dom) => {
|
|
95
|
-
const ref = (dom as HTMLElement & { __squisqCodeSnippetRoot?: WidgetRootRef })
|
|
96
|
-
.__squisqCodeSnippetRoot;
|
|
97
|
-
if (ref) setTimeout(() => ref.root.unmount(), 0);
|
|
98
|
-
},
|
|
99
|
-
ignoreSelection: true,
|
|
100
|
-
key: `squisq-code-snippet-${entry.id}`,
|
|
101
|
-
side: 1,
|
|
102
|
-
},
|
|
103
|
-
),
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
return DecorationSet.create(doc, decorations);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function remapEntries(
|
|
110
|
-
tr: Transaction,
|
|
111
|
-
previous: CodeSnippetPluginState,
|
|
112
|
-
doc: PMNode,
|
|
113
|
-
): { entries: CodeSnippetBlockEntry[]; seq: number } {
|
|
114
|
-
const mapped = new Map<number, string>();
|
|
115
|
-
const claimed = new Set<string>();
|
|
116
|
-
|
|
117
|
-
for (const entry of previous.entries) {
|
|
118
|
-
const result = tr.mapping.mapResult(entry.pos, 1);
|
|
119
|
-
if (!result.deleted) {
|
|
120
|
-
mapped.set(result.pos, entry.id);
|
|
121
|
-
claimed.add(entry.id);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// Replacing node content can mark its opening token as replaced even though
|
|
126
|
-
// the same language-tagged code block still occupies the mapped position.
|
|
127
|
-
for (const entry of previous.entries) {
|
|
128
|
-
if (claimed.has(entry.id)) continue;
|
|
129
|
-
const result = tr.mapping.mapResult(entry.pos, 1);
|
|
130
|
-
if (mapped.has(result.pos)) continue;
|
|
131
|
-
if (doc.nodeAt(result.pos)?.type.name === 'codeBlock') {
|
|
132
|
-
mapped.set(result.pos, entry.id);
|
|
133
|
-
claimed.add(entry.id);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
let seq = previous.seq;
|
|
138
|
-
const entries: CodeSnippetBlockEntry[] = [];
|
|
139
|
-
doc.descendants((node, pos) => {
|
|
140
|
-
if (node.type.name !== 'codeBlock') return;
|
|
141
|
-
if (!isCodeSnippetNode(node)) return false;
|
|
142
|
-
entries.push({ id: mapped.get(pos) ?? `code-snippet-${++seq}`, pos });
|
|
143
|
-
return false;
|
|
144
|
-
});
|
|
145
|
-
return { entries, seq };
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function applyState(
|
|
149
|
-
tr: Transaction,
|
|
150
|
-
previous: CodeSnippetPluginState,
|
|
151
|
-
editor: Editor,
|
|
152
|
-
doc: PMNode,
|
|
153
|
-
): CodeSnippetPluginState {
|
|
154
|
-
if (!tr.docChanged) return previous;
|
|
155
|
-
const { entries, seq } = remapEntries(tr, previous, doc);
|
|
156
|
-
return {
|
|
157
|
-
entries,
|
|
158
|
-
seq,
|
|
159
|
-
decorations: buildDecorations(doc, entries, editor),
|
|
160
|
-
};
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
export const CodeSnippetExtension = Extension.create<CodeSnippetExtensionOptions>({
|
|
164
|
-
name: 'squisqCodeSnippet',
|
|
165
|
-
|
|
166
|
-
addOptions() {
|
|
167
|
-
return { enabled: true };
|
|
168
|
-
},
|
|
169
|
-
|
|
170
|
-
addProseMirrorPlugins() {
|
|
171
|
-
if (this.options.enabled === false) return [];
|
|
172
|
-
const editor = this.editor as Editor;
|
|
173
|
-
return [
|
|
174
|
-
new Plugin<CodeSnippetPluginState>({
|
|
175
|
-
key: CODE_SNIPPET_KEY,
|
|
176
|
-
state: {
|
|
177
|
-
init: (_config, state) => {
|
|
178
|
-
let seq = 0;
|
|
179
|
-
const entries: CodeSnippetBlockEntry[] = [];
|
|
180
|
-
state.doc.descendants((node, pos) => {
|
|
181
|
-
if (node.type.name !== 'codeBlock') return;
|
|
182
|
-
if (!isCodeSnippetNode(node)) return false;
|
|
183
|
-
entries.push({ id: `code-snippet-${++seq}`, pos });
|
|
184
|
-
return false;
|
|
185
|
-
});
|
|
186
|
-
return {
|
|
187
|
-
entries,
|
|
188
|
-
seq,
|
|
189
|
-
decorations: buildDecorations(state.doc, entries, editor),
|
|
190
|
-
};
|
|
191
|
-
},
|
|
192
|
-
apply: (tr, previous, _oldState, newState) =>
|
|
193
|
-
applyState(tr, previous, editor, newState.doc),
|
|
194
|
-
},
|
|
195
|
-
props: {
|
|
196
|
-
decorations(state) {
|
|
197
|
-
return this.getState(state)?.decorations ?? DecorationSet.empty;
|
|
198
|
-
},
|
|
199
|
-
},
|
|
200
|
-
}),
|
|
201
|
-
];
|
|
202
|
-
},
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
export default CodeSnippetExtension;
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
/** Monaco inset mounted in place of an ordinary language-tagged code fence. */
|
|
2
|
-
|
|
3
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
4
|
-
import MonacoEditor, { type OnChange } from '@monaco-editor/react';
|
|
5
|
-
import type { Editor } from '@tiptap/react';
|
|
6
|
-
import { Icon } from '../Icon';
|
|
7
|
-
import { useMonacoLoader } from '../useMonacoLoader';
|
|
8
|
-
import { replaceCodeSnippetText } from './codeSnippetCommands';
|
|
9
|
-
import { useCodeSnippetData } from './codeSnippetData';
|
|
10
|
-
import { codeSnippetFenceLanguageToken } from './codeSnippetLanguages';
|
|
11
|
-
|
|
12
|
-
export interface CodeSnippetWidgetProps {
|
|
13
|
-
editor: Editor;
|
|
14
|
-
blockId: string;
|
|
15
|
-
host?: HTMLElement | null;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function schemeFromHost(host: HTMLElement | null | undefined): 'light' | 'dark' {
|
|
19
|
-
return host?.closest<HTMLElement>('[data-theme]')?.dataset.theme === 'dark' ? 'dark' : 'light';
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function useHostColorScheme(host: HTMLElement | null | undefined): 'light' | 'dark' {
|
|
23
|
-
const [scheme, setScheme] = useState<'light' | 'dark'>(() => schemeFromHost(host));
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const themedAncestor = host?.closest<HTMLElement>('[data-theme]');
|
|
26
|
-
setScheme(schemeFromHost(host));
|
|
27
|
-
if (!themedAncestor || typeof MutationObserver === 'undefined') return;
|
|
28
|
-
const observer = new MutationObserver(() => setScheme(schemeFromHost(host)));
|
|
29
|
-
observer.observe(themedAncestor, { attributes: true, attributeFilter: ['data-theme'] });
|
|
30
|
-
return () => observer.disconnect();
|
|
31
|
-
}, [host]);
|
|
32
|
-
return scheme;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function useEditorEditable(editor: Editor): boolean {
|
|
36
|
-
const [editable, setEditable] = useState(editor.isEditable);
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
const sync = () => setEditable(editor.isEditable);
|
|
39
|
-
editor.on('update', sync);
|
|
40
|
-
editor.on('transaction', sync);
|
|
41
|
-
return () => {
|
|
42
|
-
editor.off('update', sync);
|
|
43
|
-
editor.off('transaction', sync);
|
|
44
|
-
};
|
|
45
|
-
}, [editor]);
|
|
46
|
-
return editable;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export function CodeSnippetWidget({ editor, blockId, host }: CodeSnippetWidgetProps) {
|
|
50
|
-
const data = useCodeSnippetData(editor, blockId);
|
|
51
|
-
const { ready } = useMonacoLoader();
|
|
52
|
-
const colorScheme = useHostColorScheme(host);
|
|
53
|
-
const editable = useEditorEditable(editor);
|
|
54
|
-
|
|
55
|
-
const handleChange: OnChange = useCallback(
|
|
56
|
-
(value) => {
|
|
57
|
-
if (!editable) return;
|
|
58
|
-
replaceCodeSnippetText(editor, blockId, value ?? '');
|
|
59
|
-
},
|
|
60
|
-
[blockId, editable, editor],
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
if (!data) return null;
|
|
64
|
-
const modelSuffix = codeSnippetFenceLanguageToken(data.fenceLanguage).replace(
|
|
65
|
-
/[^a-z0-9_-]/g,
|
|
66
|
-
'-',
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<div className="squisq-code-snippet-shell" data-language={data.fenceLanguage}>
|
|
71
|
-
<div className="squisq-code-snippet-header">
|
|
72
|
-
<span className="squisq-code-snippet-title">
|
|
73
|
-
<Icon icon="fa-solid fa-file-code" />
|
|
74
|
-
<span>{data.label}</span>
|
|
75
|
-
</span>
|
|
76
|
-
<code>{`\`\`\`${data.fenceLanguage}`}</code>
|
|
77
|
-
</div>
|
|
78
|
-
<div className="squisq-code-snippet-editor" aria-label={`${data.label} code editor`}>
|
|
79
|
-
{ready ? (
|
|
80
|
-
<MonacoEditor
|
|
81
|
-
path={`inmemory://squisq/code-snippet/${blockId}.${modelSuffix || 'txt'}`}
|
|
82
|
-
language={data.monacoLanguage}
|
|
83
|
-
theme={colorScheme === 'dark' ? 'vs-dark' : 'vs'}
|
|
84
|
-
value={data.source}
|
|
85
|
-
onChange={handleChange}
|
|
86
|
-
options={{
|
|
87
|
-
automaticLayout: true,
|
|
88
|
-
contextmenu: true,
|
|
89
|
-
folding: true,
|
|
90
|
-
fontSize: 13,
|
|
91
|
-
lineNumbers: 'on',
|
|
92
|
-
minimap: { enabled: false },
|
|
93
|
-
padding: { top: 10, bottom: 10 },
|
|
94
|
-
readOnly: !editable,
|
|
95
|
-
renderLineHighlight: 'line',
|
|
96
|
-
scrollBeyondLastLine: false,
|
|
97
|
-
tabSize: 2,
|
|
98
|
-
wordWrap: 'off',
|
|
99
|
-
}}
|
|
100
|
-
/>
|
|
101
|
-
) : (
|
|
102
|
-
<div className="squisq-code-snippet-loading">Loading code editor…</div>
|
|
103
|
-
)}
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export default CodeSnippetWidget;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
/** @vitest-environment jsdom */
|
|
2
|
-
|
|
3
|
-
import { Editor } from '@tiptap/core';
|
|
4
|
-
import StarterKit from '@tiptap/starter-kit';
|
|
5
|
-
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
6
|
-
import { markdownToTiptap, tiptapToMarkdown } from '../../tiptapBridge';
|
|
7
|
-
import { replaceCodeSnippetText } from '../codeSnippetCommands';
|
|
8
|
-
import {
|
|
9
|
-
CODE_SNIPPET_KEY,
|
|
10
|
-
CodeSnippetExtension,
|
|
11
|
-
findCodeSnippetBlockPos,
|
|
12
|
-
} from '../CodeSnippetExtension';
|
|
13
|
-
|
|
14
|
-
vi.mock('../CodeSnippetWidget', () => ({
|
|
15
|
-
CodeSnippetWidget: () => null,
|
|
16
|
-
}));
|
|
17
|
-
|
|
18
|
-
const editors: Editor[] = [];
|
|
19
|
-
|
|
20
|
-
function makeEditor(markdown: string, enabled = true): Editor {
|
|
21
|
-
const editor = new Editor({
|
|
22
|
-
extensions: [StarterKit, CodeSnippetExtension.configure({ enabled })],
|
|
23
|
-
content: markdownToTiptap(markdown),
|
|
24
|
-
});
|
|
25
|
-
editors.push(editor);
|
|
26
|
-
return editor;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function entriesOf(editor: Editor) {
|
|
30
|
-
return CODE_SNIPPET_KEY.getState(editor.state)?.entries ?? [];
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
afterEach(() => {
|
|
34
|
-
for (const editor of editors) editor.destroy();
|
|
35
|
-
editors.length = 0;
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
describe('CodeSnippetExtension', () => {
|
|
39
|
-
it('claims all explicit ordinary code languages, including unknown ones', () => {
|
|
40
|
-
const editor = makeEditor(
|
|
41
|
-
'```typescript\nconst n = 1;\n```\n\n```kusto\nTable | take 5\n```\n',
|
|
42
|
-
);
|
|
43
|
-
expect(entriesOf(editor)).toHaveLength(2);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('does not steal plain, Mermaid, diagram, tree, or timeline fences', () => {
|
|
47
|
-
const editor = makeEditor(
|
|
48
|
-
[
|
|
49
|
-
'```text\nplain\n```',
|
|
50
|
-
'```mermaid\nflowchart LR\n a --> b\n```',
|
|
51
|
-
'```diagram\n+---+\n| A |\n+---+\n```',
|
|
52
|
-
'```tree\nsrc/\n└── index.ts\n```',
|
|
53
|
-
'```timeline\nMilestones: ● Start ─►\n```',
|
|
54
|
-
'```\nuntagged\n```',
|
|
55
|
-
'',
|
|
56
|
-
].join('\n\n'),
|
|
57
|
-
);
|
|
58
|
-
expect(entriesOf(editor)).toHaveLength(0);
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
it('keeps a stable block id and rewrites only the fence body', () => {
|
|
62
|
-
const editor = makeEditor('```typescript\nconst before = true;\n```\n');
|
|
63
|
-
const [before] = entriesOf(editor);
|
|
64
|
-
editor.commands.insertContentAt(0, '<p>Intro</p>');
|
|
65
|
-
const [shifted] = entriesOf(editor);
|
|
66
|
-
expect(shifted.id).toBe(before.id);
|
|
67
|
-
expect(shifted.pos).toBeGreaterThan(before.pos);
|
|
68
|
-
expect(findCodeSnippetBlockPos(editor, before.id)).toBe(shifted.pos);
|
|
69
|
-
|
|
70
|
-
expect(replaceCodeSnippetText(editor, before.id, 'const after: number = 2;')).toBe(true);
|
|
71
|
-
expect(tiptapToMarkdown(editor.getHTML())).toContain(
|
|
72
|
-
'```typescript\nconst after: number = 2;\n```',
|
|
73
|
-
);
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
it('supports clearing the Monaco model without losing the fence language', () => {
|
|
77
|
-
const editor = makeEditor('```json\n{"key": true}\n```\n');
|
|
78
|
-
const [entry] = entriesOf(editor);
|
|
79
|
-
expect(replaceCodeSnippetText(editor, entry.id, '')).toBe(true);
|
|
80
|
-
const node = editor.state.doc.nodeAt(findCodeSnippetBlockPos(editor, entry.id) ?? -1);
|
|
81
|
-
expect(node?.textContent).toBe('');
|
|
82
|
-
expect(node?.attrs.language).toBe('json');
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
it('round-trips the language tag and source byte-for-byte', () => {
|
|
86
|
-
const markdown = '```typescript\nconst n: number = 1;\n```\n';
|
|
87
|
-
const editor = makeEditor(markdown);
|
|
88
|
-
expect(tiptapToMarkdown(editor.getHTML())).toBe(markdown);
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
it('can be disabled', () => {
|
|
92
|
-
const editor = makeEditor('```typescript\nconst n = 1;\n```\n', false);
|
|
93
|
-
expect(CODE_SNIPPET_KEY.getState(editor.state)).toBeUndefined();
|
|
94
|
-
});
|
|
95
|
-
});
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { describe, expect, it } from 'vitest';
|
|
2
|
-
import {
|
|
3
|
-
CODE_SNIPPET_LANGUAGES,
|
|
4
|
-
codeSnippetFenceLanguageToken,
|
|
5
|
-
codeSnippetLanguageLabel,
|
|
6
|
-
codeSnippetMarkdown,
|
|
7
|
-
isCodeSnippetFenceLanguage,
|
|
8
|
-
monacoLanguageForFence,
|
|
9
|
-
} from '../codeSnippetLanguages';
|
|
10
|
-
|
|
11
|
-
describe('code snippet languages', () => {
|
|
12
|
-
it('offers unique explicit fence languages', () => {
|
|
13
|
-
const languages = CODE_SNIPPET_LANGUAGES.map((entry) => entry.fenceLanguage);
|
|
14
|
-
expect(new Set(languages).size).toBe(languages.length);
|
|
15
|
-
expect(languages).toContain('typescript');
|
|
16
|
-
expect(languages).toContain('json');
|
|
17
|
-
expect(languages).toContain('python');
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('keeps specialized authored-view languages out of the Monaco inset', () => {
|
|
21
|
-
for (const language of [
|
|
22
|
-
'',
|
|
23
|
-
'text',
|
|
24
|
-
'txt',
|
|
25
|
-
'plaintext',
|
|
26
|
-
'ascii',
|
|
27
|
-
'diagram',
|
|
28
|
-
'tree',
|
|
29
|
-
'timeline',
|
|
30
|
-
'mermaid',
|
|
31
|
-
]) {
|
|
32
|
-
expect(isCodeSnippetFenceLanguage(language), language).toBe(false);
|
|
33
|
-
}
|
|
34
|
-
expect(isCodeSnippetFenceLanguage('typescript')).toBe(true);
|
|
35
|
-
expect(isCodeSnippetFenceLanguage('kusto')).toBe(true);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('uses the first fence token for Monaco while preserving metadata for round trips', () => {
|
|
39
|
-
expect(codeSnippetFenceLanguageToken(' json data ')).toBe('json');
|
|
40
|
-
expect(monacoLanguageForFence('ts highlight-lines')).toBe('typescript');
|
|
41
|
-
expect(monacoLanguageForFence('yml')).toBe('yaml');
|
|
42
|
-
expect(codeSnippetLanguageLabel('csharp')).toBe('C#');
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it('creates an explicit language-tagged Markdown fence', () => {
|
|
46
|
-
expect(codeSnippetMarkdown('typescript', 'const n: number = 1;')).toBe(
|
|
47
|
-
'\n```typescript\nconst n: number = 1;\n```\n',
|
|
48
|
-
);
|
|
49
|
-
});
|
|
50
|
-
});
|