@eventuras/scribo 0.8.3 → 0.10.7
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/App.d.ts +11 -0
- package/dist/App.d.ts.map +1 -0
- package/dist/MarkdownEditor.d.ts +18 -0
- package/dist/MarkdownEditor.d.ts.map +1 -0
- package/dist/MarkdownEditor2.js +111 -0
- package/dist/MarkdownEditor2.js.map +1 -0
- package/dist/MarkdownInput.d.ts +27 -0
- package/dist/MarkdownInput.d.ts.map +1 -0
- package/dist/MarkdownInput.js +57 -0
- package/dist/MarkdownInput.js.map +1 -0
- package/dist/callout.js +5 -0
- package/dist/context/SharedHistoryContext.d.ts +11 -0
- package/dist/context/SharedHistoryContext.d.ts.map +1 -0
- package/dist/context/SharedHistoryContext.js +12 -0
- package/dist/context/SharedHistoryContext.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/main.d.ts +5 -0
- package/dist/main.d.ts.map +1 -0
- package/dist/main.js +4 -0
- package/dist/nodes/EditorNodes.d.ts +4 -0
- package/dist/nodes/EditorNodes.d.ts.map +1 -0
- package/dist/nodes/EditorNodes.js +39 -0
- package/dist/nodes/EditorNodes.js.map +1 -0
- package/dist/nodes/callout/CalloutComponent.d.ts +6 -0
- package/dist/nodes/callout/CalloutComponent.d.ts.map +1 -0
- package/dist/nodes/callout/CalloutComponent.js +53 -0
- package/dist/nodes/callout/CalloutComponent.js.map +1 -0
- package/dist/nodes/callout/CalloutNode.d.ts +27 -0
- package/dist/nodes/callout/CalloutNode.d.ts.map +1 -0
- package/dist/nodes/callout/CalloutNode.js +153 -0
- package/dist/nodes/callout/CalloutNode.js.map +1 -0
- package/dist/nodes/callout/CalloutTransformer.d.ts +3 -0
- package/dist/nodes/callout/CalloutTransformer.d.ts.map +1 -0
- package/dist/nodes/callout/CalloutTransformer.js +48 -0
- package/dist/nodes/callout/CalloutTransformer.js.map +1 -0
- package/dist/nodes/callout/calloutPlugin.d.ts +3 -0
- package/dist/nodes/callout/calloutPlugin.d.ts.map +1 -0
- package/dist/nodes/callout/calloutPlugin.js +34 -0
- package/dist/nodes/callout/calloutPlugin.js.map +1 -0
- package/dist/nodes/callout/index.d.ts +6 -0
- package/dist/nodes/callout/index.d.ts.map +1 -0
- package/dist/nodes/schedule/ScheduleItemComponent.d.ts +9 -0
- package/dist/nodes/schedule/ScheduleItemComponent.d.ts.map +1 -0
- package/dist/nodes/schedule/ScheduleItemComponent.js +167 -0
- package/dist/nodes/schedule/ScheduleItemComponent.js.map +1 -0
- package/dist/nodes/schedule/ScheduleItemNode.d.ts +31 -0
- package/dist/nodes/schedule/ScheduleItemNode.d.ts.map +1 -0
- package/dist/nodes/schedule/ScheduleItemNode.js +94 -0
- package/dist/nodes/schedule/ScheduleItemNode.js.map +1 -0
- package/dist/nodes/schedule/ScheduleTransformer.d.ts +22 -0
- package/dist/nodes/schedule/ScheduleTransformer.d.ts.map +1 -0
- package/dist/nodes/schedule/ScheduleTransformer.js +60 -0
- package/dist/nodes/schedule/ScheduleTransformer.js.map +1 -0
- package/dist/nodes/schedule/index.d.ts +5 -0
- package/dist/nodes/schedule/index.d.ts.map +1 -0
- package/dist/nodes/schedule/schedulePlugin.d.ts +3 -0
- package/dist/nodes/schedule/schedulePlugin.d.ts.map +1 -0
- package/dist/nodes/schedule/schedulePlugin.js +33 -0
- package/dist/nodes/schedule/schedulePlugin.js.map +1 -0
- package/dist/plugins/AutoLinkPlugin.d.ts +3 -0
- package/dist/plugins/AutoLinkPlugin.d.ts.map +1 -0
- package/dist/plugins/AutoLinkPlugin.js +22 -0
- package/dist/plugins/AutoLinkPlugin.js.map +1 -0
- package/dist/plugins/FloatingLinkEditorPlugin.d.ts +7 -0
- package/dist/plugins/FloatingLinkEditorPlugin.d.ts.map +1 -0
- package/dist/plugins/FloatingLinkEditorPlugin2.js +302 -0
- package/dist/plugins/FloatingLinkEditorPlugin2.js.map +1 -0
- package/dist/plugins/HistoryPlugin.d.ts +26 -0
- package/dist/plugins/HistoryPlugin.d.ts.map +1 -0
- package/dist/plugins/LinkPlugin.d.ts +3 -0
- package/dist/plugins/LinkPlugin.d.ts.map +1 -0
- package/dist/plugins/LinkPlugin.js +18 -0
- package/dist/plugins/LinkPlugin.js.map +1 -0
- package/dist/plugins/ToolbarPlugin.d.ts +7 -0
- package/dist/plugins/ToolbarPlugin.d.ts.map +1 -0
- package/dist/plugins/ToolbarPlugin.js +372 -0
- package/dist/plugins/ToolbarPlugin.js.map +1 -0
- package/dist/schedule.js +4 -0
- package/dist/scribo.css +1977 -0
- package/dist/themes/EditorTheme.d.ts +4 -0
- package/dist/themes/EditorTheme.d.ts.map +1 -0
- package/dist/themes/EditorTheme2.js +107 -0
- package/dist/themes/EditorTheme2.js.map +1 -0
- package/dist/types.d.ts +26 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/ui/ContentEditable.d.ts +6 -0
- package/dist/ui/ContentEditable.d.ts.map +1 -0
- package/dist/ui/ContentEditable2.js +14 -0
- package/dist/ui/ContentEditable2.js.map +1 -0
- package/dist/ui/DropDown.d.ts +18 -0
- package/dist/ui/DropDown.d.ts.map +1 -0
- package/dist/ui/DropDown.js +162 -0
- package/dist/ui/DropDown.js.map +1 -0
- package/dist/ui/Placeholder.d.ts +6 -0
- package/dist/ui/Placeholder.d.ts.map +1 -0
- package/dist/ui/Placeholder2.js +13 -0
- package/dist/ui/Placeholder2.js.map +1 -0
- package/dist/utils/environment.d.ts +24 -0
- package/dist/utils/environment.d.ts.map +1 -0
- package/dist/utils/environment.js +20 -0
- package/dist/utils/environment.js.map +1 -0
- package/dist/utils/getSelectedNode.d.ts +3 -0
- package/dist/utils/getSelectedNode.d.ts.map +1 -0
- package/dist/utils/getSelectedNode.js +23 -0
- package/dist/utils/getSelectedNode.js.map +1 -0
- package/dist/utils/setFloatingElemPosition.d.ts +2 -0
- package/dist/utils/setFloatingElemPosition.d.ts.map +1 -0
- package/dist/utils/setFloatingElemPositionForLinkEditor.d.ts +2 -0
- package/dist/utils/setFloatingElemPositionForLinkEditor.d.ts.map +1 -0
- package/dist/utils/setFloatingElemPositionForLinkEditor.js +33 -0
- package/dist/utils/setFloatingElemPositionForLinkEditor.js.map +1 -0
- package/dist/utils/url.d.ts +11 -0
- package/dist/utils/url.d.ts.map +1 -0
- package/dist/utils/url.js +33 -0
- package/dist/utils/url.js.map +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +55 -38
- package/src/MarkdownEditor.css +61 -47
- package/src/MarkdownEditor.tsx +76 -29
- package/src/MarkdownInput.tsx +9 -10
- package/src/context/SharedHistoryContext.tsx +8 -16
- package/src/main.tsx +3 -3
- package/src/nodes/EditorNodes.ts +10 -10
- package/src/nodes/callout/Callout.css +94 -0
- package/src/nodes/callout/CalloutComponent.tsx +61 -0
- package/src/nodes/callout/CalloutNode.ts +197 -0
- package/src/nodes/callout/CalloutTransformer.ts +87 -0
- package/src/nodes/callout/calloutPlugin.ts +37 -0
- package/src/nodes/callout/index.ts +5 -0
- package/src/nodes/schedule/ScheduleItem.css +140 -0
- package/src/nodes/schedule/ScheduleItemComponent.tsx +195 -0
- package/src/nodes/schedule/ScheduleItemNode.ts +135 -0
- package/src/nodes/schedule/ScheduleTransformer.ts +80 -0
- package/src/nodes/schedule/index.ts +4 -0
- package/src/nodes/schedule/schedulePlugin.ts +33 -0
- package/src/plugins/AutoLinkPlugin.tsx +5 -10
- package/src/plugins/FloatingLinkEditorPlugin.tsx +42 -66
- package/src/plugins/HistoryPlugin.tsx +20 -30
- package/src/plugins/LinkPlugin.tsx +2 -3
- package/src/plugins/ToolbarPlugin.tsx +129 -141
- package/src/themes/EditorTheme.css +9 -5
- package/src/themes/EditorTheme.ts +89 -90
- package/src/types.ts +27 -0
- package/src/ui/ContentEditable.tsx +5 -5
- package/src/ui/DropDown.tsx +23 -41
- package/src/ui/Placeholder.tsx +21 -21
- package/src/utils/environment.ts +6 -12
- package/src/utils/getSelectedNode.ts +3 -5
- package/src/utils/setFloatingElemPosition.ts +2 -5
- package/src/utils/setFloatingElemPositionForLinkEditor.ts +1 -1
- package/src/utils/url.ts +4 -10
- package/tsconfig.json +8 -0
- package/CHANGELOG.md +0 -65
- package/README.md +0 -126
- package/RELEASE.md +0 -102
- package/eslint.config.js +0 -4
- package/src/App.css +0 -35
- package/src/App.tsx +0 -42
- package/src/index.tsx +0 -13
- package/tsconfig.node.json +0 -11
- package/vite.config.site.ts +0 -19
- package/vite.config.ts +0 -33
- /package/{src → dist}/vite-env.d.ts +0 -0
package/dist/App.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
/** Initial markdown string */
|
|
3
|
+
initialMarkdown: string;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Wraps editor + rendered output
|
|
7
|
+
* @see {@link Props}
|
|
8
|
+
*/
|
|
9
|
+
export declare function App({ initialMarkdown }: Readonly<Props>): import("react").JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=App.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,8BAA8B;IAC9B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,EAAE,eAAe,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,+BA8BvD"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ScriboPlugin } from './types';
|
|
3
|
+
export type onChangeMisc = {
|
|
4
|
+
plainText: string;
|
|
5
|
+
};
|
|
6
|
+
export interface MarkdownEditorProps {
|
|
7
|
+
initialMarkdown?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
plugins?: ScriboPlugin[];
|
|
10
|
+
onChange?: (markdown: string, misc: onChangeMisc) => void;
|
|
11
|
+
onBlur?: () => void;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
'data-testid'?: string;
|
|
14
|
+
id?: string;
|
|
15
|
+
}
|
|
16
|
+
declare const MarkdownEditor: React.FC<MarkdownEditorProps>;
|
|
17
|
+
export default MarkdownEditor;
|
|
18
|
+
//# sourceMappingURL=MarkdownEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../src/MarkdownEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmHjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { useSharedHistoryContext } from "./context/SharedHistoryContext.js";
|
|
2
|
+
import EditorNodes from "./nodes/EditorNodes.js";
|
|
3
|
+
import LexicalAutoLinkPlugin from "./plugins/AutoLinkPlugin.js";
|
|
4
|
+
import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin2.js";
|
|
5
|
+
import LinkPlugin from "./plugins/LinkPlugin.js";
|
|
6
|
+
import ToolbarPlugin from "./plugins/ToolbarPlugin.js";
|
|
7
|
+
import theme from "./themes/EditorTheme2.js";
|
|
8
|
+
import LexicalContentEditable from "./ui/ContentEditable2.js";
|
|
9
|
+
import Placeholder from "./ui/Placeholder2.js";
|
|
10
|
+
import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
|
|
11
|
+
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
|
12
|
+
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
|
|
13
|
+
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
|
14
|
+
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
|
15
|
+
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
|
16
|
+
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
17
|
+
import { $createParagraphNode, $createTextNode, $getRoot } from "lexical";
|
|
18
|
+
import { useMemo, useState } from "react";
|
|
19
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
20
|
+
//#region src/MarkdownEditor.tsx
|
|
21
|
+
var MarkdownEditor = (props) => {
|
|
22
|
+
const { historyState } = useSharedHistoryContext();
|
|
23
|
+
const [isLinkEditMode, setIsLinkEditMode] = useState(false);
|
|
24
|
+
const [floatingAnchorElem, setFloatingAnchorElem] = useState(void 0);
|
|
25
|
+
const onRef = (_floatingAnchorElem) => {
|
|
26
|
+
if (_floatingAnchorElem !== null) setFloatingAnchorElem(_floatingAnchorElem);
|
|
27
|
+
};
|
|
28
|
+
const pluginNodes = useMemo(() => (props.plugins ?? []).flatMap((p) => p.nodes ?? []), [props.plugins]);
|
|
29
|
+
const allTransformers = useMemo(() => [...(props.plugins ?? []).flatMap((p) => p.transformers ?? []), ...TRANSFORMERS], [props.plugins]);
|
|
30
|
+
const toolbarButtons = useMemo(() => (props.plugins ?? []).flatMap((p) => p.toolbarButtons ?? []), [props.plugins]);
|
|
31
|
+
const editorPlugins = useMemo(() => (props.plugins ?? []).flatMap((p) => p.editorPlugins ?? []), [props.plugins]);
|
|
32
|
+
const internalOnChange = (editorState) => {
|
|
33
|
+
editorState.read(() => {
|
|
34
|
+
const markdown = $convertToMarkdownString(allTransformers);
|
|
35
|
+
const plainText = $getRoot().getTextContent();
|
|
36
|
+
props.onChange?.(markdown, { plainText });
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
const initialConfig = {
|
|
40
|
+
namespace: "ScriboMarkdown",
|
|
41
|
+
nodes: [...EditorNodes, ...pluginNodes],
|
|
42
|
+
onError: (error) => {
|
|
43
|
+
throw error;
|
|
44
|
+
},
|
|
45
|
+
theme,
|
|
46
|
+
editorState: props.initialMarkdown ? () => {
|
|
47
|
+
const unescapedMarkdown = (props.initialMarkdown ?? "").replaceAll(/\\([*_`[\]()#+-])/g, "$1");
|
|
48
|
+
try {
|
|
49
|
+
$convertFromMarkdownString(unescapedMarkdown, allTransformers);
|
|
50
|
+
} catch (err) {
|
|
51
|
+
console.error("Scribo: markdown parse failed, falling back to plain text", err);
|
|
52
|
+
const root = $getRoot();
|
|
53
|
+
root.clear();
|
|
54
|
+
const paragraph = $createParagraphNode();
|
|
55
|
+
paragraph.append($createTextNode(unescapedMarkdown));
|
|
56
|
+
root.append(paragraph);
|
|
57
|
+
}
|
|
58
|
+
} : void 0
|
|
59
|
+
};
|
|
60
|
+
return /* @__PURE__ */ jsx("div", {
|
|
61
|
+
className: props.className,
|
|
62
|
+
children: /* @__PURE__ */ jsx(LexicalComposer, {
|
|
63
|
+
initialConfig,
|
|
64
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
65
|
+
className: "editor-shell",
|
|
66
|
+
onBlur: props.onBlur,
|
|
67
|
+
"data-testid": props["data-testid"],
|
|
68
|
+
id: props.id,
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ jsx(ToolbarPlugin, {
|
|
71
|
+
setIsLinkEditMode,
|
|
72
|
+
toolbarButtons
|
|
73
|
+
}),
|
|
74
|
+
/* @__PURE__ */ jsxs("div", {
|
|
75
|
+
className: "editor-container rich-text",
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ jsx(HistoryPlugin, { externalHistoryState: historyState }),
|
|
78
|
+
/* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: allTransformers }),
|
|
79
|
+
/* @__PURE__ */ jsx(LexicalAutoLinkPlugin, {}),
|
|
80
|
+
/* @__PURE__ */ jsx(LinkPlugin, {}),
|
|
81
|
+
/* @__PURE__ */ jsx(FloatingLinkEditorPlugin, {
|
|
82
|
+
anchorElem: floatingAnchorElem,
|
|
83
|
+
isLinkEditMode,
|
|
84
|
+
setIsLinkEditMode
|
|
85
|
+
}),
|
|
86
|
+
/* @__PURE__ */ jsx(RichTextPlugin, {
|
|
87
|
+
contentEditable: /* @__PURE__ */ jsx("div", {
|
|
88
|
+
className: "editor-scroller",
|
|
89
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
90
|
+
className: "editor",
|
|
91
|
+
ref: onRef,
|
|
92
|
+
id: props.id ? `${props.id}-editable` : void 0,
|
|
93
|
+
children: /* @__PURE__ */ jsx(LexicalContentEditable, {})
|
|
94
|
+
})
|
|
95
|
+
}),
|
|
96
|
+
placeholder: /* @__PURE__ */ jsx(Placeholder, { children: props.placeholder }),
|
|
97
|
+
ErrorBoundary: LexicalErrorBoundary
|
|
98
|
+
})
|
|
99
|
+
]
|
|
100
|
+
}),
|
|
101
|
+
props.onChange && /* @__PURE__ */ jsx(OnChangePlugin, { onChange: internalOnChange }),
|
|
102
|
+
editorPlugins.map((Plugin) => /* @__PURE__ */ jsx(Plugin, {}, Plugin.displayName ?? Plugin.name))
|
|
103
|
+
]
|
|
104
|
+
})
|
|
105
|
+
})
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
//#endregion
|
|
109
|
+
export { MarkdownEditor as default };
|
|
110
|
+
|
|
111
|
+
//# sourceMappingURL=MarkdownEditor2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownEditor2.js","names":[],"sources":["../src/MarkdownEditor.tsx"],"sourcesContent":["import {\n $convertFromMarkdownString,\n $convertToMarkdownString,\n TRANSFORMERS,\n} from '@lexical/markdown';\nimport { LexicalComposer } from '@lexical/react/LexicalComposer';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { $createParagraphNode, $createTextNode, $getRoot, type EditorState } from 'lexical';\nimport type React from 'react';\nimport { useMemo, useState } from 'react';\nimport { useSharedHistoryContext } from './context/SharedHistoryContext';\nimport EditorNodes from './nodes/EditorNodes';\nimport AutoLinkPlugin from './plugins/AutoLinkPlugin';\nimport FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';\nimport LinkPlugin from './plugins/LinkPlugin';\nimport ToolbarPlugin from './plugins/ToolbarPlugin';\nimport EditorTheme from './themes/EditorTheme';\nimport type { ScriboPlugin } from './types';\nimport ContentEditable from './ui/ContentEditable';\nimport Placeholder from './ui/Placeholder';\n\nexport type onChangeMisc = {\n plainText: string;\n};\nexport interface MarkdownEditorProps {\n initialMarkdown?: string;\n className?: string;\n plugins?: ScriboPlugin[];\n onChange?: (markdown: string, misc: onChangeMisc) => void;\n onBlur?: () => void;\n placeholder?: string;\n 'data-testid'?: string;\n id?: string;\n}\n\nconst MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {\n const { historyState } = useSharedHistoryContext();\n const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);\n\n const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | undefined>(\n undefined\n );\n\n const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n if (_floatingAnchorElem !== null) {\n setFloatingAnchorElem(_floatingAnchorElem);\n }\n };\n\n // Collect nodes and transformers from plugins\n const pluginNodes = useMemo(\n () => (props.plugins ?? []).flatMap((p) => p.nodes ?? []),\n [props.plugins]\n );\n const allTransformers = useMemo(\n () => [...(props.plugins ?? []).flatMap((p) => p.transformers ?? []), ...TRANSFORMERS],\n [props.plugins]\n );\n const toolbarButtons = useMemo(\n () => (props.plugins ?? []).flatMap((p) => p.toolbarButtons ?? []),\n [props.plugins]\n );\n const editorPlugins = useMemo(\n () => (props.plugins ?? []).flatMap((p) => p.editorPlugins ?? []),\n [props.plugins]\n );\n\n const internalOnChange = (editorState: EditorState) => {\n editorState.read(() => {\n const markdown = $convertToMarkdownString(allTransformers);\n const plainText = $getRoot().getTextContent();\n props.onChange?.(markdown, { plainText });\n });\n };\n\n const initialConfig = {\n namespace: 'ScriboMarkdown',\n nodes: [...EditorNodes, ...pluginNodes],\n onError: (error: Error) => {\n throw error;\n },\n theme: EditorTheme,\n editorState: props.initialMarkdown\n ? () => {\n // Unescape backslash-escaped markdown characters\n const unescapedMarkdown = (props.initialMarkdown ?? '').replaceAll(\n /\\\\([*_`[\\]()#+-])/g,\n '$1'\n );\n try {\n $convertFromMarkdownString(unescapedMarkdown, allTransformers);\n } catch (err) {\n // Markdown parsing threw (e.g. a transformer bug). Fall back to plain\n // text so the field stays editable and content isn't lost — better\n // than crashing the whole tree and propagating to the page boundary.\n console.error('Scribo: markdown parse failed, falling back to plain text', err);\n const root = $getRoot();\n root.clear();\n const paragraph = $createParagraphNode();\n paragraph.append($createTextNode(unescapedMarkdown));\n root.append(paragraph);\n }\n }\n : undefined,\n };\n\n return (\n <div className={props.className}>\n <LexicalComposer initialConfig={initialConfig}>\n <div\n className=\"editor-shell\"\n onBlur={props.onBlur}\n data-testid={props['data-testid']}\n id={props.id}\n >\n <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} toolbarButtons={toolbarButtons} />\n <div className=\"editor-container rich-text\">\n <HistoryPlugin externalHistoryState={historyState} />\n <MarkdownShortcutPlugin transformers={allTransformers} />\n <AutoLinkPlugin />\n <LinkPlugin />\n <FloatingLinkEditorPlugin\n anchorElem={floatingAnchorElem}\n isLinkEditMode={isLinkEditMode}\n setIsLinkEditMode={setIsLinkEditMode}\n />\n <RichTextPlugin\n contentEditable={\n <div className=\"editor-scroller\">\n <div\n className=\"editor\"\n ref={onRef}\n id={props.id ? `${props.id}-editable` : undefined}\n >\n <ContentEditable />\n </div>\n </div>\n }\n placeholder={<Placeholder>{props.placeholder}</Placeholder>}\n ErrorBoundary={LexicalErrorBoundary}\n />\n </div>\n {props.onChange && <OnChangePlugin onChange={internalOnChange} />}\n {editorPlugins.map((Plugin) => (\n <Plugin key={Plugin.displayName ?? Plugin.name} />\n ))}\n </div>\n </LexicalComposer>\n </div>\n );\n};\n\nexport default MarkdownEditor;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ScriboPlugin } from './types';
|
|
2
|
+
export type MarkdownInputProps = {
|
|
3
|
+
id?: string;
|
|
4
|
+
name: string;
|
|
5
|
+
maxLength?: number;
|
|
6
|
+
plugins?: ScriboPlugin[];
|
|
7
|
+
label?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
labelClassName?: string;
|
|
12
|
+
editorClassName?: string;
|
|
13
|
+
errorClassName?: string;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
'data-testid'?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* MarkdownInput component that works standalone or with parent form handling
|
|
19
|
+
* Uses onChange callback to notify parent of value changes
|
|
20
|
+
* Framework-agnostic with flexible className props for custom styling
|
|
21
|
+
*/
|
|
22
|
+
declare const MarkdownInput: {
|
|
23
|
+
(props: MarkdownInputProps): import("react").JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
export default MarkdownInput;
|
|
27
|
+
//# sourceMappingURL=MarkdownInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownInput.d.ts","sourceRoot":"","sources":["../src/MarkdownInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa;YAAW,kBAAkB;;CAgD/C,CAAC;AAGF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import MarkdownEditor from "./MarkdownEditor2.js";
|
|
3
|
+
import { useRef, useState } from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/MarkdownInput.tsx
|
|
6
|
+
/**
|
|
7
|
+
* MarkdownInput component that works standalone or with parent form handling
|
|
8
|
+
* Uses onChange callback to notify parent of value changes
|
|
9
|
+
* Framework-agnostic with flexible className props for custom styling
|
|
10
|
+
*/
|
|
11
|
+
var MarkdownInput = (props) => {
|
|
12
|
+
const [error, setError] = useState(null);
|
|
13
|
+
const [value, setValue] = useState(props.defaultValue ?? "");
|
|
14
|
+
const plainTextRef = useRef("");
|
|
15
|
+
const id = props.id ?? props.name;
|
|
16
|
+
const handleChange = (markdown, { plainText }) => {
|
|
17
|
+
plainTextRef.current = plainText;
|
|
18
|
+
setValue(markdown);
|
|
19
|
+
if (props.onChange) props.onChange(markdown);
|
|
20
|
+
if (props.maxLength && markdown.length > props.maxLength) setError(`Maximum ${props.maxLength} characters allowed (currently ${markdown.length})`);
|
|
21
|
+
else setError(null);
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
24
|
+
className: props.className,
|
|
25
|
+
children: [
|
|
26
|
+
props.label && /* @__PURE__ */ jsx("label", {
|
|
27
|
+
htmlFor: id,
|
|
28
|
+
className: props.labelClassName,
|
|
29
|
+
children: props.label
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx("input", {
|
|
32
|
+
type: "hidden",
|
|
33
|
+
name: props.name,
|
|
34
|
+
value
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsx(MarkdownEditor, {
|
|
37
|
+
onChange: handleChange,
|
|
38
|
+
className: props.editorClassName,
|
|
39
|
+
plugins: props.plugins,
|
|
40
|
+
initialMarkdown: props.defaultValue,
|
|
41
|
+
placeholder: props.placeholder,
|
|
42
|
+
"data-testid": props["data-testid"],
|
|
43
|
+
id
|
|
44
|
+
}),
|
|
45
|
+
error && /* @__PURE__ */ jsx("span", {
|
|
46
|
+
role: "alert",
|
|
47
|
+
className: props.errorClassName,
|
|
48
|
+
children: error
|
|
49
|
+
})
|
|
50
|
+
]
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
MarkdownInput.displayName = "MarkdownInput";
|
|
54
|
+
//#endregion
|
|
55
|
+
export { MarkdownInput as default };
|
|
56
|
+
|
|
57
|
+
//# sourceMappingURL=MarkdownInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownInput.js","names":[],"sources":["../src/MarkdownInput.tsx"],"sourcesContent":["'use client';\nimport { useRef, useState } from 'react';\nimport MarkdownEditor from './MarkdownEditor';\nimport type { ScriboPlugin } from './types';\n\nexport type MarkdownInputProps = {\n id?: string;\n name: string;\n maxLength?: number;\n plugins?: ScriboPlugin[];\n label?: string;\n placeholder?: string;\n defaultValue?: string;\n className?: string;\n labelClassName?: string;\n editorClassName?: string;\n errorClassName?: string;\n onChange?: (value: string) => void;\n 'data-testid'?: string;\n};\n\n/**\n * MarkdownInput component that works standalone or with parent form handling\n * Uses onChange callback to notify parent of value changes\n * Framework-agnostic with flexible className props for custom styling\n */\nconst MarkdownInput = (props: MarkdownInputProps) => {\n const [error, setError] = useState<string | null>(null);\n const [value, setValue] = useState(props.defaultValue ?? '');\n const plainTextRef = useRef('');\n const id = props.id ?? props.name;\n\n const handleChange = (markdown: string, { plainText }: { plainText: string }) => {\n plainTextRef.current = plainText;\n setValue(markdown);\n\n // Notify parent component of the change\n if (props.onChange) {\n props.onChange(markdown);\n }\n\n // Validate maxLength against markdown content (what gets stored)\n if (props.maxLength && markdown.length > props.maxLength) {\n setError(`Maximum ${props.maxLength} characters allowed (currently ${markdown.length})`);\n } else {\n setError(null);\n }\n };\n\n return (\n <div className={props.className}>\n {props.label && (\n <label htmlFor={id} className={props.labelClassName}>\n {props.label}\n </label>\n )}\n {/* Hidden input to store value - controlled by React state */}\n <input type=\"hidden\" name={props.name} value={value} />\n <MarkdownEditor\n onChange={handleChange}\n className={props.editorClassName}\n plugins={props.plugins}\n initialMarkdown={props.defaultValue}\n placeholder={props.placeholder}\n data-testid={props['data-testid']}\n id={id}\n />\n {error && (\n <span role=\"alert\" className={props.errorClassName}>\n {error}\n </span>\n )}\n </div>\n );\n};\n\nMarkdownInput.displayName = 'MarkdownInput';\nexport default MarkdownInput;\n"],"mappings":";;;;;;;;;;AA0BA,IAAM,iBAAiB,UAA8B;CACnD,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM,gBAAgB,EAAE;CAC3D,MAAM,eAAe,OAAO,EAAE;CAC9B,MAAM,KAAK,MAAM,MAAM,MAAM;CAE7B,MAAM,gBAAgB,UAAkB,EAAE,gBAAuC;EAC/E,aAAa,UAAU;EACvB,SAAS,QAAQ;EAGjB,IAAI,MAAM,UACR,MAAM,SAAS,QAAQ;EAIzB,IAAI,MAAM,aAAa,SAAS,SAAS,MAAM,WAC7C,SAAS,WAAW,MAAM,UAAU,iCAAiC,SAAS,OAAO,EAAE;OAEvF,SAAS,IAAI;CAEjB;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,MAAM;EAAtB,UAAA;GACG,MAAM,SACL,oBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,MAAM;IAClC,UAAA,MAAM;GACF,CAAA;GAGT,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAM,MAAM;IAAa;GAAQ,CAAA;GACtD,oBAAC,gBAAD;IACE,UAAU;IACV,WAAW,MAAM;IACjB,SAAS,MAAM;IACf,iBAAiB,MAAM;IACvB,aAAa,MAAM;IACnB,eAAa,MAAM;IACf;GACL,CAAA;GACA,SACC,oBAAC,QAAD;IAAM,MAAK;IAAQ,WAAW,MAAM;IACjC,UAAA;GACG,CAAA;EAEL;;AAET;AAEA,cAAc,cAAc"}
|
package/dist/callout.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { $createCalloutNode, $isCalloutNode, CALLOUT_TYPES, CalloutNode } from "./nodes/callout/CalloutNode.js";
|
|
2
|
+
import { CalloutPlugin } from "./nodes/callout/CalloutComponent.js";
|
|
3
|
+
import { CALLOUT_TRANSFORMER } from "./nodes/callout/CalloutTransformer.js";
|
|
4
|
+
import { calloutPlugin } from "./nodes/callout/calloutPlugin.js";
|
|
5
|
+
export { $createCalloutNode, $isCalloutNode, CALLOUT_TRANSFORMER, CALLOUT_TYPES, CalloutNode, CalloutPlugin, calloutPlugin };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
|
|
2
|
+
import { JSX, ReactNode } from 'react';
|
|
3
|
+
type ContextShape = {
|
|
4
|
+
historyState?: HistoryState;
|
|
5
|
+
};
|
|
6
|
+
export declare const SharedHistoryContext: ({ children }: {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}) => JSX.Element;
|
|
9
|
+
export declare const useSharedHistoryContext: () => ContextShape;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=SharedHistoryContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SharedHistoryContext.d.ts","sourceRoot":"","sources":["../../src/context/SharedHistoryContext.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,KAAK,YAAY,GAAG;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,KAAG,GAAG,CAAC,OAGhF,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAO,YAE1C,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "@lexical/react/LexicalHistoryPlugin";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
import "react/jsx-runtime";
|
|
4
|
+
//#region src/context/SharedHistoryContext.tsx
|
|
5
|
+
var Context = createContext({});
|
|
6
|
+
var useSharedHistoryContext = () => {
|
|
7
|
+
return useContext(Context);
|
|
8
|
+
};
|
|
9
|
+
//#endregion
|
|
10
|
+
export { useSharedHistoryContext };
|
|
11
|
+
|
|
12
|
+
//# sourceMappingURL=SharedHistoryContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SharedHistoryContext.js","names":[],"sources":["../../src/context/SharedHistoryContext.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';\nimport { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin';\nimport type * as React from 'react';\nimport type { JSX } from 'react';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\ntype ContextShape = {\n historyState?: HistoryState;\n};\n\nconst Context: React.Context<ContextShape> = createContext({});\n\nexport const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {\n const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);\n return <Context.Provider value={historyContext}>{children}</Context.Provider>;\n};\n\nexport const useSharedHistoryContext = (): ContextShape => {\n return useContext(Context);\n};\n"],"mappings":";;;;AAkBA,IAAM,UAAuC,cAAc,CAAC,CAAC;AAO7D,IAAa,gCAA8C;CACzD,OAAO,WAAW,OAAO;AAC3B"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,WAAW,CAAC;AACnB,OAAO,sBAAsB,CAAC"}
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { default as MarkdownEditor } from './MarkdownEditor';
|
|
2
|
+
import { default as MarkdownInput } from './MarkdownInput';
|
|
3
|
+
export type { ScriboPlugin, ScriboToolbarButton } from './types';
|
|
4
|
+
export { MarkdownEditor, MarkdownInput };
|
|
5
|
+
//# sourceMappingURL=main.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/main.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorNodes.d.ts","sourceRoot":"","sources":["../../src/nodes/EditorNodes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGlD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAgBnC,CAAC;AAET,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { CodeHighlightNode, CodeNode } from "@lexical/code";
|
|
2
|
+
import { HashtagNode } from "@lexical/hashtag";
|
|
3
|
+
import { AutoLinkNode, LinkNode } from "@lexical/link";
|
|
4
|
+
import { ListItemNode, ListNode } from "@lexical/list";
|
|
5
|
+
import { MarkNode } from "@lexical/mark";
|
|
6
|
+
import { OverflowNode } from "@lexical/overflow";
|
|
7
|
+
import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
|
|
8
|
+
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
|
9
|
+
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
|
|
10
|
+
//#region src/nodes/EditorNodes.ts
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the MIT license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
* Modified from: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/PlaygroundNodes.ts
|
|
18
|
+
*/
|
|
19
|
+
var EditorNodes = [
|
|
20
|
+
HeadingNode,
|
|
21
|
+
ListNode,
|
|
22
|
+
ListItemNode,
|
|
23
|
+
QuoteNode,
|
|
24
|
+
CodeNode,
|
|
25
|
+
TableNode,
|
|
26
|
+
TableCellNode,
|
|
27
|
+
TableRowNode,
|
|
28
|
+
HashtagNode,
|
|
29
|
+
CodeHighlightNode,
|
|
30
|
+
AutoLinkNode,
|
|
31
|
+
LinkNode,
|
|
32
|
+
OverflowNode,
|
|
33
|
+
HorizontalRuleNode,
|
|
34
|
+
MarkNode
|
|
35
|
+
];
|
|
36
|
+
//#endregion
|
|
37
|
+
export { EditorNodes as default };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=EditorNodes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorNodes.js","names":[],"sources":["../../src/nodes/EditorNodes.ts"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * Modified from: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/PlaygroundNodes.ts\n */\n\nimport { CodeHighlightNode, CodeNode } from '@lexical/code';\nimport { HashtagNode } from '@lexical/hashtag';\nimport { AutoLinkNode, LinkNode } from '@lexical/link';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { MarkNode } from '@lexical/mark';\nimport { OverflowNode } from '@lexical/overflow';\nimport { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text';\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table';\nimport type { Klass, LexicalNode } from 'lexical';\n\n// Using 'as any' to work around Lexical version conflicts between workspace installs\nconst EditorNodes: Array<Klass<LexicalNode>> = [\n HeadingNode,\n ListNode,\n ListItemNode,\n QuoteNode,\n CodeNode,\n TableNode,\n TableCellNode,\n TableRowNode,\n HashtagNode,\n CodeHighlightNode,\n AutoLinkNode,\n LinkNode,\n OverflowNode,\n HorizontalRuleNode,\n MarkNode,\n] as any;\n\nexport default EditorNodes;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,IAAM,cAAyC;CAC7C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalloutComponent.d.ts","sourceRoot":"","sources":["../../../src/nodes/callout/CalloutComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAOvB;;;GAGG;AACH,eAAO,MAAM,aAAa,YAiDzB,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import { $isCalloutNode, CALLOUT_TYPES } from "./CalloutNode.js";
|
|
3
|
+
import { $createParagraphNode, $getNodeByKey } from "lexical";
|
|
4
|
+
import { useEffect } from "react";
|
|
5
|
+
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
6
|
+
//#region src/nodes/callout/CalloutComponent.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Plugin that listens for DOM custom events from CalloutNode toolbar
|
|
9
|
+
* and updates the Lexical state accordingly.
|
|
10
|
+
*/
|
|
11
|
+
var CalloutPlugin = () => {
|
|
12
|
+
const [editor] = useLexicalComposerContext();
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const rootElement = editor.getRootElement()?.parentElement;
|
|
15
|
+
if (!rootElement) return;
|
|
16
|
+
const handleTypeChange = (e) => {
|
|
17
|
+
const { nodeKey, calloutType } = e.detail;
|
|
18
|
+
if (!nodeKey || !CALLOUT_TYPES.includes(calloutType)) return;
|
|
19
|
+
editor.update(() => {
|
|
20
|
+
const node = $getNodeByKey(nodeKey);
|
|
21
|
+
if ($isCalloutNode(node)) node.setCalloutType(calloutType);
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
const handleRemove = (e) => {
|
|
25
|
+
const { nodeKey } = e.detail;
|
|
26
|
+
if (!nodeKey) return;
|
|
27
|
+
editor.update(() => {
|
|
28
|
+
const node = $getNodeByKey(nodeKey);
|
|
29
|
+
if (!$isCalloutNode(node)) return;
|
|
30
|
+
const children = node.getChildren();
|
|
31
|
+
if (children.length > 0) {
|
|
32
|
+
for (const child of children) node.insertBefore(child);
|
|
33
|
+
node.remove();
|
|
34
|
+
} else {
|
|
35
|
+
const p = $createParagraphNode();
|
|
36
|
+
node.replace(p);
|
|
37
|
+
p.selectEnd();
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
rootElement.addEventListener("callout-type-change", handleTypeChange);
|
|
42
|
+
rootElement.addEventListener("callout-remove", handleRemove);
|
|
43
|
+
return () => {
|
|
44
|
+
rootElement.removeEventListener("callout-type-change", handleTypeChange);
|
|
45
|
+
rootElement.removeEventListener("callout-remove", handleRemove);
|
|
46
|
+
};
|
|
47
|
+
}, [editor]);
|
|
48
|
+
return null;
|
|
49
|
+
};
|
|
50
|
+
//#endregion
|
|
51
|
+
export { CalloutPlugin };
|
|
52
|
+
|
|
53
|
+
//# sourceMappingURL=CalloutComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalloutComponent.js","names":[],"sources":["../../../src/nodes/callout/CalloutComponent.tsx"],"sourcesContent":["import './Callout.css';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $createParagraphNode, $getNodeByKey } from 'lexical';\nimport { useEffect } from 'react';\n\nimport { $isCalloutNode, CALLOUT_TYPES, type CalloutType } from './CalloutNode';\n\n/**\n * Plugin that listens for DOM custom events from CalloutNode toolbar\n * and updates the Lexical state accordingly.\n */\nexport const CalloutPlugin = () => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n const rootElement = editor.getRootElement()?.parentElement;\n if (!rootElement) return;\n\n const handleTypeChange = (e: Event) => {\n const { nodeKey, calloutType } = (e as CustomEvent).detail;\n if (!nodeKey || !CALLOUT_TYPES.includes(calloutType)) return;\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isCalloutNode(node)) {\n node.setCalloutType(calloutType as CalloutType);\n }\n });\n };\n\n const handleRemove = (e: Event) => {\n const { nodeKey } = (e as CustomEvent).detail;\n if (!nodeKey) return;\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if (!$isCalloutNode(node)) return;\n\n const children = node.getChildren();\n if (children.length > 0) {\n for (const child of children) {\n node.insertBefore(child);\n }\n node.remove();\n } else {\n const p = $createParagraphNode();\n node.replace(p);\n p.selectEnd();\n }\n });\n };\n\n rootElement.addEventListener('callout-type-change', handleTypeChange);\n rootElement.addEventListener('callout-remove', handleRemove);\n\n return () => {\n rootElement.removeEventListener('callout-type-change', handleTypeChange);\n rootElement.removeEventListener('callout-remove', handleRemove);\n };\n }, [editor]);\n\n return null;\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,sBAAsB;CACjC,MAAM,CAAC,UAAU,0BAA0B;CAE3C,gBAAgB;EACd,MAAM,cAAc,OAAO,eAAe,CAAC,EAAE;EAC7C,IAAI,CAAC,aAAa;EAElB,MAAM,oBAAoB,MAAa;GACrC,MAAM,EAAE,SAAS,gBAAiB,EAAkB;GACpD,IAAI,CAAC,WAAW,CAAC,cAAc,SAAS,WAAW,GAAG;GACtD,OAAO,aAAa;IAClB,MAAM,OAAO,cAAc,OAAO;IAClC,IAAI,eAAe,IAAI,GACrB,KAAK,eAAe,WAA0B;GAElD,CAAC;EACH;EAEA,MAAM,gBAAgB,MAAa;GACjC,MAAM,EAAE,YAAa,EAAkB;GACvC,IAAI,CAAC,SAAS;GACd,OAAO,aAAa;IAClB,MAAM,OAAO,cAAc,OAAO;IAClC,IAAI,CAAC,eAAe,IAAI,GAAG;IAE3B,MAAM,WAAW,KAAK,YAAY;IAClC,IAAI,SAAS,SAAS,GAAG;KACvB,KAAK,MAAM,SAAS,UAClB,KAAK,aAAa,KAAK;KAEzB,KAAK,OAAO;IACd,OAAO;KACL,MAAM,IAAI,qBAAqB;KAC/B,KAAK,QAAQ,CAAC;KACd,EAAE,UAAU;IACd;GACF,CAAC;EACH;EAEA,YAAY,iBAAiB,uBAAuB,gBAAgB;EACpE,YAAY,iBAAiB,kBAAkB,YAAY;EAE3D,aAAa;GACX,YAAY,oBAAoB,uBAAuB,gBAAgB;GACvE,YAAY,oBAAoB,kBAAkB,YAAY;EAChE;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { DOMConversionMap, DOMExportOutput, ElementNode, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';
|
|
2
|
+
export declare const CALLOUT_TYPES: readonly ["NOTE", "TIP", "IMPORTANT", "WARNING", "CAUTION"];
|
|
3
|
+
export type CalloutType = (typeof CALLOUT_TYPES)[number];
|
|
4
|
+
export type SerializedCalloutNode = Spread<{
|
|
5
|
+
calloutType: CalloutType;
|
|
6
|
+
}, SerializedElementNode>;
|
|
7
|
+
export declare class CalloutNode extends ElementNode {
|
|
8
|
+
__calloutType: CalloutType;
|
|
9
|
+
static getType(): string;
|
|
10
|
+
static clone(node: CalloutNode): CalloutNode;
|
|
11
|
+
constructor(calloutType?: CalloutType, key?: NodeKey);
|
|
12
|
+
getCalloutType(): CalloutType;
|
|
13
|
+
setCalloutType(calloutType: CalloutType): void;
|
|
14
|
+
createDOM(): HTMLElement;
|
|
15
|
+
private _applyDOMClass;
|
|
16
|
+
updateDOM(prevNode: CalloutNode, dom: HTMLElement): boolean;
|
|
17
|
+
exportDOM(): DOMExportOutput;
|
|
18
|
+
static importDOM(): DOMConversionMap | null;
|
|
19
|
+
static importJSON(json: SerializedCalloutNode): CalloutNode;
|
|
20
|
+
exportJSON(): SerializedCalloutNode;
|
|
21
|
+
canIndent(): boolean;
|
|
22
|
+
collapseAtStart(): boolean;
|
|
23
|
+
insertNewAfter(): ElementNode;
|
|
24
|
+
}
|
|
25
|
+
export declare function $createCalloutNode(calloutType?: CalloutType): CalloutNode;
|
|
26
|
+
export declare function $isCalloutNode(node: LexicalNode | null | undefined): node is CalloutNode;
|
|
27
|
+
//# sourceMappingURL=CalloutNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalloutNode.d.ts","sourceRoot":"","sources":["../../../src/nodes/callout/CalloutNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,aAAa,6DAA8D,CAAC;AACzF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAUzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;IAAE,WAAW,EAAE,WAAW,CAAA;CAAE,EAAE,qBAAqB,CAAC,CAAC;AAEhG,qBAAa,WAAY,SAAQ,WAAW;IAC1C,aAAa,EAAE,WAAW,CAAC;IAE3B,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAIhC,WAAW,GAAE,WAAoB,EAAE,GAAG,CAAC,EAAE,OAAO;IAK5D,cAAc,IAAI,WAAW;IAI7B,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAO9C,SAAS,IAAI,WAAW;IAuDxB,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,GAAG,OAAO;IAW3D,SAAS,IAAI,eAAe;IAO5B,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAiB3C,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,qBAAqB,GAAG,WAAW;IAI3D,UAAU,IAAI,qBAAqB;IAUnC,SAAS,IAAI,OAAO;IAIpB,eAAe,IAAI,OAAO;IAY1B,cAAc,IAAI,WAAW;CAY9B;AAED,wBAAgB,kBAAkB,CAAC,WAAW,GAAE,WAAoB,GAAG,WAAW,CAEjF;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,WAAW,CAExF"}
|