@dxos/plugin-markdown 0.6.11-staging.e6894a4 → 0.6.12-main.5cc132e
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/lib/browser/DocumentEditor-PXYEHGQA.mjs +11 -0
- package/dist/lib/browser/{MarkdownEditor-5DHI4ORZ.mjs → MarkdownEditor-IE2ISQQF.mjs} +2 -2
- package/dist/lib/browser/{chunk-NSVC456H.mjs → chunk-5FP6MXCU.mjs} +3 -3
- package/dist/lib/browser/{chunk-CQJL4G4X.mjs → chunk-7W37KPH3.mjs} +1 -1
- package/dist/lib/browser/{chunk-CQJL4G4X.mjs.map → chunk-7W37KPH3.mjs.map} +1 -1
- package/dist/lib/browser/{chunk-CJO5DJVS.mjs → chunk-RQLDAFNM.mjs} +54 -44
- package/dist/lib/browser/chunk-RQLDAFNM.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +14 -7
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/types/index.mjs +1 -1
- package/dist/lib/node/{DocumentEditor-MV3S4FKT.cjs → DocumentEditor-DZOOGCBM.cjs} +8 -8
- package/dist/lib/node/{DocumentEditor-MV3S4FKT.cjs.map → DocumentEditor-DZOOGCBM.cjs.map} +2 -2
- package/dist/lib/node/{MarkdownEditor-X3U7B4FU.cjs → MarkdownEditor-IUHHJ532.cjs} +7 -7
- package/dist/lib/node/{MarkdownEditor-X3U7B4FU.cjs.map → MarkdownEditor-IUHHJ532.cjs.map} +2 -2
- package/dist/lib/node/{chunk-CIIALZRA.cjs → chunk-DFWSVQEA.cjs} +9 -9
- package/dist/lib/node/{chunk-VWQH4WC2.cjs → chunk-EZTJSCMZ.cjs} +4 -4
- package/dist/lib/node/{chunk-VWQH4WC2.cjs.map → chunk-EZTJSCMZ.cjs.map} +1 -1
- package/dist/lib/node/{chunk-MMYLEP2V.cjs → chunk-GRU6YP3J.cjs} +48 -42
- package/dist/lib/node/chunk-GRU6YP3J.cjs.map +7 -0
- package/dist/lib/node/index.cjs +40 -33
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node/types/index.cjs +4 -4
- package/dist/lib/node/types/index.cjs.map +1 -1
- package/dist/lib/node-esm/DocumentCard-2P4EICBA.mjs +11 -0
- package/dist/lib/node-esm/DocumentCard-2P4EICBA.mjs.map +7 -0
- package/dist/lib/node-esm/DocumentEditor-PXYEHGQA.mjs +11 -0
- package/dist/lib/node-esm/DocumentEditor-PXYEHGQA.mjs.map +7 -0
- package/dist/lib/node-esm/MarkdownEditor-IE2ISQQF.mjs +10 -0
- package/dist/lib/node-esm/MarkdownEditor-IE2ISQQF.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-354DCID5.mjs +117 -0
- package/dist/lib/node-esm/chunk-354DCID5.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-4GGD6YJO.mjs +19 -0
- package/dist/lib/node-esm/chunk-4GGD6YJO.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-5FP6MXCU.mjs +164 -0
- package/dist/lib/node-esm/chunk-5FP6MXCU.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-7W37KPH3.mjs +39 -0
- package/dist/lib/node-esm/chunk-7W37KPH3.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-RL7QY322.mjs +86 -0
- package/dist/lib/node-esm/chunk-RL7QY322.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-RQLDAFNM.mjs +216 -0
- package/dist/lib/node-esm/chunk-RQLDAFNM.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +538 -0
- package/dist/lib/node-esm/index.mjs.map +7 -0
- package/dist/lib/node-esm/meta.json +1 -0
- package/dist/lib/node-esm/meta.mjs +9 -0
- package/dist/lib/node-esm/meta.mjs.map +7 -0
- package/dist/lib/node-esm/types/index.mjs +12 -0
- package/dist/lib/node-esm/types/index.mjs.map +7 -0
- package/dist/types/src/MarkdownPlugin.d.ts.map +1 -1
- package/dist/types/src/components/MarkdownEditor.d.ts.map +1 -1
- package/dist/types/src/components/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +2 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -0
- package/dist/types/src/hooks/useSelectCurrentThread.d.ts +6 -0
- package/dist/types/src/hooks/useSelectCurrentThread.d.ts.map +1 -0
- package/dist/types/src/types/types.d.ts +1 -1
- package/dist/types/src/types/types.d.ts.map +1 -1
- package/package.json +36 -32
- package/src/MarkdownPlugin.tsx +9 -2
- package/src/components/MarkdownEditor.stories.tsx +5 -8
- package/src/components/MarkdownEditor.tsx +11 -39
- package/src/components/Toolbar.stories.tsx +14 -16
- package/src/hooks/index.ts +5 -0
- package/src/hooks/useSelectCurrentThread.tsx +46 -0
- package/src/types/types.ts +1 -1
- package/dist/lib/browser/DocumentEditor-HOQEHRNG.mjs +0 -11
- package/dist/lib/browser/chunk-CJO5DJVS.mjs.map +0 -7
- package/dist/lib/node/chunk-MMYLEP2V.cjs.map +0 -7
- /package/dist/lib/browser/{DocumentEditor-HOQEHRNG.mjs.map → DocumentEditor-PXYEHGQA.mjs.map} +0 -0
- /package/dist/lib/browser/{MarkdownEditor-5DHI4ORZ.mjs.map → MarkdownEditor-IE2ISQQF.mjs.map} +0 -0
- /package/dist/lib/browser/{chunk-NSVC456H.mjs.map → chunk-5FP6MXCU.mjs.map} +0 -0
- /package/dist/lib/node/{chunk-CIIALZRA.cjs.map → chunk-DFWSVQEA.cjs.map} +0 -0
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
import {
|
|
2
|
+
MARKDOWN_PLUGIN
|
|
3
|
+
} from "./chunk-4GGD6YJO.mjs";
|
|
4
|
+
|
|
5
|
+
// packages/plugins/plugin-markdown/src/components/MarkdownEditor.tsx
|
|
6
|
+
import { openSearchPanel } from "@codemirror/search";
|
|
7
|
+
import React, { useMemo, useEffect, useCallback as useCallback2 } from "react";
|
|
8
|
+
import { LayoutAction as LayoutAction2, useResolvePlugin, parseLayoutPlugin, useIntentDispatcher } from "@dxos/app-framework";
|
|
9
|
+
import { useThemeContext, useTranslation } from "@dxos/react-ui";
|
|
10
|
+
import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
|
|
11
|
+
import { Toolbar, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, processAction, useActionHandler, useCommentState, useCommentClickListener, useFormattingState, useTextEditor, editorContent, editorGutter } from "@dxos/react-ui-editor";
|
|
12
|
+
import { sectionToolbarLayout } from "@dxos/react-ui-stack";
|
|
13
|
+
import { textBlockWidth, focusRing, mx } from "@dxos/react-ui-theme";
|
|
14
|
+
import { nonNullable } from "@dxos/util";
|
|
15
|
+
|
|
16
|
+
// packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx
|
|
17
|
+
import { EditorView } from "@codemirror/view";
|
|
18
|
+
import { useCallback } from "react";
|
|
19
|
+
import { LayoutAction, useIntentResolver } from "@dxos/app-framework";
|
|
20
|
+
import { Cursor, setSelection } from "@dxos/react-ui-editor";
|
|
21
|
+
var useSelectCurrentThread = (editorView, documentId) => {
|
|
22
|
+
const handleScrollIntoView = useCallback(({ action, data }) => {
|
|
23
|
+
if (action === LayoutAction.SCROLL_INTO_VIEW) {
|
|
24
|
+
if (editorView && data?.id === documentId && data?.cursor) {
|
|
25
|
+
const range = Cursor.getRangeFromCursor(editorView.state, data.cursor);
|
|
26
|
+
if (range) {
|
|
27
|
+
const selection = editorView.state.selection.main.from !== range.from ? {
|
|
28
|
+
anchor: range.from
|
|
29
|
+
} : void 0;
|
|
30
|
+
const effects = [
|
|
31
|
+
// NOTE: This does not use the DOM scrollIntoView function.
|
|
32
|
+
EditorView.scrollIntoView(range.from, {
|
|
33
|
+
y: "start",
|
|
34
|
+
yMargin: 96
|
|
35
|
+
})
|
|
36
|
+
];
|
|
37
|
+
if (selection) {
|
|
38
|
+
effects.push(setSelection.of({
|
|
39
|
+
current: documentId
|
|
40
|
+
}));
|
|
41
|
+
}
|
|
42
|
+
editorView.dispatch({
|
|
43
|
+
effects,
|
|
44
|
+
selection: selection ? {
|
|
45
|
+
anchor: range.from
|
|
46
|
+
} : void 0
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}, [
|
|
52
|
+
documentId,
|
|
53
|
+
editorView
|
|
54
|
+
]);
|
|
55
|
+
useIntentResolver(MARKDOWN_PLUGIN, handleScrollIntoView);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// packages/plugins/plugin-markdown/src/components/MarkdownEditor.tsx
|
|
59
|
+
var attentionFragment = mx("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
|
|
60
|
+
var DEFAULT_VIEW_MODE = "preview";
|
|
61
|
+
var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensionProviders, scrollPastEnd, scrollTo, selection, toolbar, viewMode, onFileUpload, onViewModeChange }) => {
|
|
62
|
+
const { t } = useTranslation(MARKDOWN_PLUGIN);
|
|
63
|
+
const { themeMode } = useThemeContext();
|
|
64
|
+
const dispatch = useIntentDispatcher();
|
|
65
|
+
const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
|
|
66
|
+
const [formattingState, formattingObserver] = useFormattingState();
|
|
67
|
+
const isDirectlyAttended = useIsDirectlyAttended(id);
|
|
68
|
+
const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [
|
|
69
|
+
extensionProviders
|
|
70
|
+
]);
|
|
71
|
+
const [commentsState, commentObserver] = useCommentState();
|
|
72
|
+
const onCommentClick = useCallback2(() => {
|
|
73
|
+
void dispatch({
|
|
74
|
+
action: LayoutAction2.SET_LAYOUT,
|
|
75
|
+
data: {
|
|
76
|
+
element: "complementary",
|
|
77
|
+
state: true
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}, [
|
|
81
|
+
dispatch
|
|
82
|
+
]);
|
|
83
|
+
const commentClickObserver = useCommentClickListener(onCommentClick);
|
|
84
|
+
const handleDrop = async (view, { files }) => {
|
|
85
|
+
const file = files[0];
|
|
86
|
+
const info = file && onFileUpload ? await onFileUpload(file) : void 0;
|
|
87
|
+
if (info) {
|
|
88
|
+
processAction(view, {
|
|
89
|
+
type: "image",
|
|
90
|
+
data: info.url
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
const { parentRef, view: editorView, focusAttributes } = useTextEditor(() => ({
|
|
95
|
+
initialValue,
|
|
96
|
+
extensions: [
|
|
97
|
+
formattingObserver,
|
|
98
|
+
commentObserver,
|
|
99
|
+
commentClickObserver,
|
|
100
|
+
createBasicExtensions({
|
|
101
|
+
readonly: viewMode === "readonly",
|
|
102
|
+
placeholder: t("editor placeholder"),
|
|
103
|
+
scrollPastEnd: role === "section" ? false : scrollPastEnd
|
|
104
|
+
}),
|
|
105
|
+
createMarkdownExtensions({
|
|
106
|
+
themeMode
|
|
107
|
+
}),
|
|
108
|
+
createThemeExtensions({
|
|
109
|
+
themeMode,
|
|
110
|
+
syntaxHighlighting: true,
|
|
111
|
+
slots: {
|
|
112
|
+
content: {
|
|
113
|
+
className: editorContent
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}),
|
|
117
|
+
editorGutter,
|
|
118
|
+
role !== "section" && onFileUpload ? dropFile({
|
|
119
|
+
onDrop: handleDrop
|
|
120
|
+
}) : [],
|
|
121
|
+
providerExtensions,
|
|
122
|
+
extensions
|
|
123
|
+
].filter(nonNullable),
|
|
124
|
+
...role !== "section" && {
|
|
125
|
+
id,
|
|
126
|
+
scrollTo,
|
|
127
|
+
selection,
|
|
128
|
+
// TODO(wittjosiah): Autofocus based on layout is racy.
|
|
129
|
+
autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
|
|
130
|
+
moveToEndOfLine: true
|
|
131
|
+
}
|
|
132
|
+
}), [
|
|
133
|
+
id,
|
|
134
|
+
initialValue,
|
|
135
|
+
formattingObserver,
|
|
136
|
+
viewMode,
|
|
137
|
+
themeMode,
|
|
138
|
+
extensions,
|
|
139
|
+
providerExtensions
|
|
140
|
+
]);
|
|
141
|
+
useTest(editorView);
|
|
142
|
+
useSelectCurrentThread(editorView, id);
|
|
143
|
+
const handleToolbarAction = useActionHandler(editorView);
|
|
144
|
+
const handleAction = (action) => {
|
|
145
|
+
switch (action.type) {
|
|
146
|
+
case "search": {
|
|
147
|
+
if (editorView) {
|
|
148
|
+
openSearchPanel(editorView);
|
|
149
|
+
}
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
case "view-mode": {
|
|
153
|
+
onViewModeChange?.(id, action.data);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
handleToolbarAction?.(action);
|
|
158
|
+
};
|
|
159
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
160
|
+
role: "none",
|
|
161
|
+
...role === "section" ? {
|
|
162
|
+
className: "flex flex-col"
|
|
163
|
+
} : {
|
|
164
|
+
className: "contents group/editor",
|
|
165
|
+
...isDirectlyAttended && {
|
|
166
|
+
"aria-current": "location"
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}, toolbar && /* @__PURE__ */ React.createElement("div", {
|
|
170
|
+
role: "none",
|
|
171
|
+
className: mx("flex shrink-0 justify-center overflow-x-auto", attentionFragment)
|
|
172
|
+
}, /* @__PURE__ */ React.createElement(Toolbar.Root, {
|
|
173
|
+
classNames: role === "section" ? [
|
|
174
|
+
textBlockWidth,
|
|
175
|
+
"z-[2] group-focus-within/section:visible",
|
|
176
|
+
!isDirectlyAttended && "invisible",
|
|
177
|
+
sectionToolbarLayout
|
|
178
|
+
] : [
|
|
179
|
+
textBlockWidth,
|
|
180
|
+
"group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator"
|
|
181
|
+
],
|
|
182
|
+
state: formattingState && {
|
|
183
|
+
...formattingState,
|
|
184
|
+
...commentsState
|
|
185
|
+
},
|
|
186
|
+
onAction: handleAction
|
|
187
|
+
}, /* @__PURE__ */ React.createElement(Toolbar.Markdown, null), onFileUpload && /* @__PURE__ */ React.createElement(Toolbar.Custom, {
|
|
188
|
+
onUpload: onFileUpload
|
|
189
|
+
}), /* @__PURE__ */ React.createElement(Toolbar.Separator, null), /* @__PURE__ */ React.createElement(Toolbar.View, {
|
|
190
|
+
mode: viewMode ?? DEFAULT_VIEW_MODE
|
|
191
|
+
}), /* @__PURE__ */ React.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React.createElement("div", {
|
|
192
|
+
role: "none",
|
|
193
|
+
ref: parentRef,
|
|
194
|
+
"data-testid": "composer.markdownRoot",
|
|
195
|
+
"data-toolbar": toolbar ? "enabled" : "disabled",
|
|
196
|
+
className: role === "section" ? mx("flex flex-col flex-1 min-bs-[12rem]", focusRing) : mx("flex is-full bs-full overflow-hidden", focusRing, attentionFragment, "focus-visible:ring-inset", "data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2"),
|
|
197
|
+
...focusAttributes
|
|
198
|
+
}));
|
|
199
|
+
};
|
|
200
|
+
var useTest = (view) => {
|
|
201
|
+
useEffect(() => {
|
|
202
|
+
const composer = window.composer;
|
|
203
|
+
if (composer) {
|
|
204
|
+
composer.editorView = view;
|
|
205
|
+
}
|
|
206
|
+
}, [
|
|
207
|
+
view
|
|
208
|
+
]);
|
|
209
|
+
};
|
|
210
|
+
var MarkdownEditor_default = MarkdownEditor;
|
|
211
|
+
|
|
212
|
+
export {
|
|
213
|
+
MarkdownEditor,
|
|
214
|
+
MarkdownEditor_default
|
|
215
|
+
};
|
|
216
|
+
//# sourceMappingURL=chunk-RQLDAFNM.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/MarkdownEditor.tsx", "../../../src/hooks/useSelectCurrentThread.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { openSearchPanel } from '@codemirror/search';\nimport { type EditorView } from '@codemirror/view';\nimport React, { useMemo, useEffect, useCallback } from 'react';\n\nimport {\n type FileInfo,\n LayoutAction,\n type LayoutCoordinate,\n useResolvePlugin,\n parseLayoutPlugin,\n useIntentDispatcher,\n} from '@dxos/app-framework';\nimport { useThemeContext, useTranslation } from '@dxos/react-ui';\nimport { useIsDirectlyAttended } from '@dxos/react-ui-attention';\nimport {\n type Action,\n type DNDOptions,\n type EditorViewMode,\n type EditorInputMode,\n type UseTextEditorProps,\n Toolbar,\n createBasicExtensions,\n createMarkdownExtensions,\n createThemeExtensions,\n dropFile,\n processAction,\n useActionHandler,\n useCommentState,\n useCommentClickListener,\n useFormattingState,\n useTextEditor,\n editorContent,\n editorGutter,\n} from '@dxos/react-ui-editor';\nimport { sectionToolbarLayout } from '@dxos/react-ui-stack';\nimport { textBlockWidth, focusRing, mx } from '@dxos/react-ui-theme';\nimport { nonNullable } from '@dxos/util';\n\nimport { useSelectCurrentThread } from '../hooks';\nimport { MARKDOWN_PLUGIN } from '../meta';\nimport type { MarkdownPluginState } from '../types';\n\n// TODO(Zan): Factor into a shared location.\nconst attentionFragment = mx(\n 'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',\n 'group-focus-within/editor:border-separator',\n);\n\nconst DEFAULT_VIEW_MODE: EditorViewMode = 'preview';\n\nexport type MarkdownEditorProps = {\n id: string;\n coordinate?: LayoutCoordinate;\n inputMode?: EditorInputMode;\n role?: string;\n scrollPastEnd?: boolean;\n toolbar?: boolean;\n viewMode?: EditorViewMode;\n onViewModeChange?: (id: string, mode: EditorViewMode) => void;\n onFileUpload?: (file: File) => Promise<FileInfo | undefined>;\n} & Pick<UseTextEditorProps, 'initialValue' | 'scrollTo' | 'selection' | 'extensions'> &\n Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;\n\nexport const MarkdownEditor = ({\n id,\n role = 'article',\n initialValue,\n extensions,\n extensionProviders,\n scrollPastEnd,\n scrollTo,\n selection,\n toolbar,\n viewMode,\n onFileUpload,\n onViewModeChange,\n}: MarkdownEditorProps) => {\n const { t } = useTranslation(MARKDOWN_PLUGIN);\n const { themeMode } = useThemeContext();\n const dispatch = useIntentDispatcher();\n const layoutPlugin = useResolvePlugin(parseLayoutPlugin);\n const [formattingState, formattingObserver] = useFormattingState();\n const isDirectlyAttended = useIsDirectlyAttended(id);\n\n // Extensions from other plugins.\n const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [extensionProviders]);\n\n // TODO(Zan): Move these into thread plugin as well?\n const [commentsState, commentObserver] = useCommentState();\n const onCommentClick = useCallback(() => {\n void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });\n }, [dispatch]);\n const commentClickObserver = useCommentClickListener(onCommentClick);\n\n // Drag files.\n const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {\n const file = files[0];\n const info = file && onFileUpload ? await onFileUpload(file) : undefined;\n if (info) {\n processAction(view, { type: 'image', data: info.url });\n }\n };\n\n const {\n parentRef,\n view: editorView,\n focusAttributes,\n } = useTextEditor(\n () => ({\n initialValue,\n extensions: [\n formattingObserver,\n commentObserver,\n commentClickObserver,\n createBasicExtensions({\n readonly: viewMode === 'readonly',\n placeholder: t('editor placeholder'),\n scrollPastEnd: role === 'section' ? false : scrollPastEnd,\n }),\n createMarkdownExtensions({ themeMode }),\n createThemeExtensions({\n themeMode,\n syntaxHighlighting: true,\n slots: { content: { className: editorContent } },\n }),\n editorGutter,\n role !== 'section' && onFileUpload ? dropFile({ onDrop: handleDrop }) : [],\n providerExtensions,\n extensions,\n ].filter(nonNullable),\n ...(role !== 'section' && {\n id,\n scrollTo,\n selection,\n // TODO(wittjosiah): Autofocus based on layout is racy.\n autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,\n moveToEndOfLine: true,\n }),\n }),\n [id, initialValue, formattingObserver, viewMode, themeMode, extensions, providerExtensions],\n );\n\n useTest(editorView);\n useSelectCurrentThread(editorView, id);\n\n // Toolbar handler.\n const handleToolbarAction = useActionHandler(editorView);\n const handleAction = (action: Action) => {\n switch (action.type) {\n case 'search': {\n if (editorView) {\n openSearchPanel(editorView);\n }\n return;\n }\n case 'view-mode': {\n onViewModeChange?.(id, action.data);\n return;\n }\n }\n\n handleToolbarAction?.(action);\n };\n\n return (\n <div\n role='none'\n // TODO(burdon): Move role logic out of here (see sheet, table, sketch, etc.)\n {...(role === 'section'\n ? { className: 'flex flex-col' }\n : {\n className: 'contents group/editor',\n ...(isDirectlyAttended && { 'aria-current': 'location' }),\n })}\n >\n {toolbar && (\n <div role='none' className={mx('flex shrink-0 justify-center overflow-x-auto', attentionFragment)}>\n <Toolbar.Root\n classNames={\n role === 'section'\n ? [\n textBlockWidth,\n 'z-[2] group-focus-within/section:visible',\n !isDirectlyAttended && 'invisible',\n sectionToolbarLayout,\n ]\n : [\n textBlockWidth,\n 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',\n ]\n }\n state={formattingState && { ...formattingState, ...commentsState }}\n onAction={handleAction}\n >\n <Toolbar.Markdown />\n {onFileUpload && <Toolbar.Custom onUpload={onFileUpload} />}\n <Toolbar.Separator />\n <Toolbar.View mode={viewMode ?? DEFAULT_VIEW_MODE} />\n <Toolbar.Actions />\n </Toolbar.Root>\n </div>\n )}\n <div\n role='none'\n ref={parentRef}\n data-testid='composer.markdownRoot'\n data-toolbar={toolbar ? 'enabled' : 'disabled'}\n className={\n role === 'section'\n ? mx('flex flex-col flex-1 min-bs-[12rem]', focusRing)\n : mx(\n 'flex is-full bs-full overflow-hidden',\n focusRing,\n attentionFragment,\n 'focus-visible:ring-inset',\n 'data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2',\n )\n }\n {...focusAttributes}\n />\n </div>\n );\n};\n\n// Expose editor view for playwright tests.\n// TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.\nconst useTest = (view?: EditorView) => {\n useEffect(() => {\n const composer = (window as any).composer;\n if (composer) {\n composer.editorView = view;\n }\n }, [view]);\n};\n\nexport default MarkdownEditor;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { EditorView } from '@codemirror/view';\nimport { useCallback } from 'react';\n\nimport { LayoutAction, useIntentResolver } from '@dxos/app-framework';\nimport { Cursor, setSelection } from '@dxos/react-ui-editor';\n\nimport { MARKDOWN_PLUGIN } from '../meta';\n\n/**\n * Handle scrolling and selection of the current thread in a markdown editor.\n */\nexport const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {\n const handleScrollIntoView = useCallback(\n ({ action, data }: { action: string; data?: any }) => {\n if (action === LayoutAction.SCROLL_INTO_VIEW) {\n if (editorView && data?.id === documentId && data?.cursor) {\n // TODO(burdon): We need typed intents.\n const range = Cursor.getRangeFromCursor(editorView.state, data.cursor);\n if (range) {\n const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;\n const effects = [\n // NOTE: This does not use the DOM scrollIntoView function.\n EditorView.scrollIntoView(range.from, { y: 'start', yMargin: 96 }),\n ];\n if (selection) {\n // Update the editor selection to get bi-directional highlighting.\n effects.push(setSelection.of({ current: documentId }));\n }\n\n editorView.dispatch({\n effects,\n selection: selection ? { anchor: range.from } : undefined,\n });\n }\n }\n }\n },\n [documentId, editorView],\n );\n\n useIntentResolver(MARKDOWN_PLUGIN, handleScrollIntoView);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["openSearchPanel", "React", "useMemo", "useEffect", "useCallback", "LayoutAction", "useResolvePlugin", "parseLayoutPlugin", "useIntentDispatcher", "useThemeContext", "useTranslation", "useIsDirectlyAttended", "Toolbar", "createBasicExtensions", "createMarkdownExtensions", "createThemeExtensions", "dropFile", "processAction", "useActionHandler", "useCommentState", "useCommentClickListener", "useFormattingState", "useTextEditor", "editorContent", "editorGutter", "sectionToolbarLayout", "textBlockWidth", "focusRing", "mx", "nonNullable", "EditorView", "useCallback", "LayoutAction", "useIntentResolver", "Cursor", "setSelection", "useSelectCurrentThread", "editorView", "documentId", "handleScrollIntoView", "useCallback", "action", "data", "LayoutAction", "SCROLL_INTO_VIEW", "id", "cursor", "range", "Cursor", "getRangeFromCursor", "state", "selection", "main", "from", "anchor", "undefined", "effects", "EditorView", "scrollIntoView", "y", "yMargin", "push", "setSelection", "of", "current", "dispatch", "useIntentResolver", "MARKDOWN_PLUGIN", "attentionFragment", "mx", "DEFAULT_VIEW_MODE", "MarkdownEditor", "id", "role", "initialValue", "extensions", "extensionProviders", "scrollPastEnd", "scrollTo", "selection", "toolbar", "viewMode", "onFileUpload", "onViewModeChange", "t", "useTranslation", "MARKDOWN_PLUGIN", "themeMode", "useThemeContext", "dispatch", "useIntentDispatcher", "layoutPlugin", "useResolvePlugin", "parseLayoutPlugin", "formattingState", "formattingObserver", "useFormattingState", "isDirectlyAttended", "useIsDirectlyAttended", "providerExtensions", "useMemo", "map", "provider", "commentsState", "commentObserver", "useCommentState", "onCommentClick", "useCallback", "action", "LayoutAction", "SET_LAYOUT", "data", "element", "state", "commentClickObserver", "useCommentClickListener", "handleDrop", "view", "files", "file", "info", "undefined", "processAction", "type", "url", "parentRef", "editorView", "focusAttributes", "useTextEditor", "createBasicExtensions", "readonly", "placeholder", "createMarkdownExtensions", "createThemeExtensions", "syntaxHighlighting", "slots", "content", "className", "editorContent", "editorGutter", "dropFile", "onDrop", "filter", "nonNullable", "autoFocus", "provides", "layout", "scrollIntoView", "moveToEndOfLine", "useTest", "useSelectCurrentThread", "handleToolbarAction", "useActionHandler", "handleAction", "openSearchPanel", "div", "Toolbar", "Root", "classNames", "textBlockWidth", "sectionToolbarLayout", "onAction", "Markdown", "Custom", "onUpload", "Separator", "View", "mode", "Actions", "ref", "data-testid", "data-toolbar", "focusRing", "useEffect", "composer", "window"]
|
|
7
|
+
}
|