@uipath/apollo-react 3.67.0 → 3.68.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/StickyNoteNode/FormattingToolbar.cjs +149 -0
- package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts +12 -0
- package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts.map +1 -0
- package/dist/canvas/components/StickyNoteNode/FormattingToolbar.js +115 -0
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs +75 -12
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.d.ts.map +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js +75 -12
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.cjs +54 -7
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts +16 -0
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts.map +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.js +40 -2
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.cjs +8 -0
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.d.ts +2 -0
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.d.ts.map +1 -1
- package/dist/canvas/components/StickyNoteNode/StickyNoteNode.utils.js +3 -1
- package/dist/canvas/components/StickyNoteNode/useMarkdownShortcuts.cjs +62 -0
- package/dist/canvas/components/StickyNoteNode/useMarkdownShortcuts.d.ts +4 -0
- package/dist/canvas/components/StickyNoteNode/useMarkdownShortcuts.d.ts.map +1 -0
- package/dist/canvas/components/StickyNoteNode/useMarkdownShortcuts.js +28 -0
- package/package.json +1 -1
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
FormattingToolbar: ()=>FormattingToolbar
|
|
28
|
+
});
|
|
29
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const external_index_cjs_namespaceObject = require("../../index.cjs");
|
|
31
|
+
const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
|
|
32
|
+
const external_react_namespaceObject = require("react");
|
|
33
|
+
const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
|
|
34
|
+
const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
|
|
35
|
+
const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
|
|
36
|
+
const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
|
|
37
|
+
const applyFormat = (0, external_react_namespaceObject.useCallback)((formatFn)=>{
|
|
38
|
+
const textarea = textAreaRef.current;
|
|
39
|
+
if (!textarea) return;
|
|
40
|
+
const input = {
|
|
41
|
+
value: textarea.value,
|
|
42
|
+
selectionStart: textarea.selectionStart,
|
|
43
|
+
selectionEnd: textarea.selectionEnd
|
|
44
|
+
};
|
|
45
|
+
onFormat(formatFn(input));
|
|
46
|
+
textarea.focus();
|
|
47
|
+
}, [
|
|
48
|
+
textAreaRef,
|
|
49
|
+
onFormat
|
|
50
|
+
]);
|
|
51
|
+
const handleBold = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBold), [
|
|
52
|
+
applyFormat
|
|
53
|
+
]);
|
|
54
|
+
const handleItalic = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleItalic), [
|
|
55
|
+
applyFormat
|
|
56
|
+
]);
|
|
57
|
+
const handleStrikethrough = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleStrikethrough), [
|
|
58
|
+
applyFormat
|
|
59
|
+
]);
|
|
60
|
+
const handleBulletList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBulletList), [
|
|
61
|
+
applyFormat
|
|
62
|
+
]);
|
|
63
|
+
const handleNumberedList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleNumberedList), [
|
|
64
|
+
applyFormat
|
|
65
|
+
]);
|
|
66
|
+
const mod = (0, external_StickyNoteNode_utils_cjs_namespaceObject.getModifierKey)();
|
|
67
|
+
const shift = (0, external_StickyNoteNode_utils_cjs_namespaceObject.isMac)() ? '⇧' : '+Shift+';
|
|
68
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingToolbarContainer, {
|
|
69
|
+
borderColor: borderColor,
|
|
70
|
+
onMouseDown: (e)=>e.preventDefault(),
|
|
71
|
+
className: "nodrag nowheel",
|
|
72
|
+
children: [
|
|
73
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
74
|
+
content: `Bold (${mod}+B)`,
|
|
75
|
+
placement: "top",
|
|
76
|
+
delay: true,
|
|
77
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
|
|
78
|
+
isActive: activeFormats.bold,
|
|
79
|
+
onClick: handleBold,
|
|
80
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
81
|
+
icon: "bold",
|
|
82
|
+
size: 14
|
|
83
|
+
})
|
|
84
|
+
})
|
|
85
|
+
}),
|
|
86
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
87
|
+
content: `Italic (${mod}+I)`,
|
|
88
|
+
placement: "top",
|
|
89
|
+
delay: true,
|
|
90
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
|
|
91
|
+
isActive: activeFormats.italic,
|
|
92
|
+
onClick: handleItalic,
|
|
93
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
94
|
+
icon: "italic",
|
|
95
|
+
size: 14
|
|
96
|
+
})
|
|
97
|
+
})
|
|
98
|
+
}),
|
|
99
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
100
|
+
content: `Strikethrough (${mod}${shift}X)`,
|
|
101
|
+
placement: "top",
|
|
102
|
+
delay: true,
|
|
103
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
|
|
104
|
+
isActive: activeFormats.strikethrough,
|
|
105
|
+
onClick: handleStrikethrough,
|
|
106
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
107
|
+
icon: "strikethrough",
|
|
108
|
+
size: 14
|
|
109
|
+
})
|
|
110
|
+
})
|
|
111
|
+
}),
|
|
112
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ToolbarSeparator, {}),
|
|
113
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
114
|
+
content: "Bullet list",
|
|
115
|
+
placement: "top",
|
|
116
|
+
delay: true,
|
|
117
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
|
|
118
|
+
isActive: activeFormats.bulletList,
|
|
119
|
+
onClick: handleBulletList,
|
|
120
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
121
|
+
icon: "list",
|
|
122
|
+
size: 14
|
|
123
|
+
})
|
|
124
|
+
})
|
|
125
|
+
}),
|
|
126
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
127
|
+
content: "Numbered list",
|
|
128
|
+
placement: "top",
|
|
129
|
+
delay: true,
|
|
130
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
|
|
131
|
+
isActive: activeFormats.numberedList,
|
|
132
|
+
onClick: handleNumberedList,
|
|
133
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
134
|
+
icon: "list-ordered",
|
|
135
|
+
size: 14
|
|
136
|
+
})
|
|
137
|
+
})
|
|
138
|
+
})
|
|
139
|
+
]
|
|
140
|
+
});
|
|
141
|
+
};
|
|
142
|
+
const FormattingToolbar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(FormattingToolbarComponent);
|
|
143
|
+
exports.FormattingToolbar = __webpack_exports__.FormattingToolbar;
|
|
144
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
145
|
+
"FormattingToolbar"
|
|
146
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
147
|
+
Object.defineProperty(exports, '__esModule', {
|
|
148
|
+
value: true
|
|
149
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
import type { ActiveFormats } from './markdown-formatting';
|
|
3
|
+
import type { TextSelection } from './StickyNoteNode.types';
|
|
4
|
+
interface FormattingToolbarProps {
|
|
5
|
+
textAreaRef: RefObject<HTMLTextAreaElement | null>;
|
|
6
|
+
borderColor: string;
|
|
7
|
+
activeFormats: ActiveFormats;
|
|
8
|
+
onFormat: (result: TextSelection) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const FormattingToolbar: import("react").MemoExoticComponent<({ textAreaRef, borderColor, activeFormats, onFormat, }: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element>;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=FormattingToolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAwED,eAAO,MAAM,iBAAiB,+FAjE3B,sBAAsB,6CAiEwC,CAAC"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NodeIcon } from "../../index.js";
|
|
3
|
+
import { ApTooltip } from "../../../material/components/index.js";
|
|
4
|
+
import { memo, useCallback } from "react";
|
|
5
|
+
import { toggleBold, toggleBulletList, toggleItalic, toggleNumberedList, toggleStrikethrough } from "./markdown-formatting/index.js";
|
|
6
|
+
import { FormattingButton, FormattingToolbarContainer, ToolbarSeparator } from "./StickyNoteNode.styles.js";
|
|
7
|
+
import { getModifierKey, isMac } from "./StickyNoteNode.utils.js";
|
|
8
|
+
const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
|
|
9
|
+
const applyFormat = useCallback((formatFn)=>{
|
|
10
|
+
const textarea = textAreaRef.current;
|
|
11
|
+
if (!textarea) return;
|
|
12
|
+
const input = {
|
|
13
|
+
value: textarea.value,
|
|
14
|
+
selectionStart: textarea.selectionStart,
|
|
15
|
+
selectionEnd: textarea.selectionEnd
|
|
16
|
+
};
|
|
17
|
+
onFormat(formatFn(input));
|
|
18
|
+
textarea.focus();
|
|
19
|
+
}, [
|
|
20
|
+
textAreaRef,
|
|
21
|
+
onFormat
|
|
22
|
+
]);
|
|
23
|
+
const handleBold = useCallback(()=>applyFormat(toggleBold), [
|
|
24
|
+
applyFormat
|
|
25
|
+
]);
|
|
26
|
+
const handleItalic = useCallback(()=>applyFormat(toggleItalic), [
|
|
27
|
+
applyFormat
|
|
28
|
+
]);
|
|
29
|
+
const handleStrikethrough = useCallback(()=>applyFormat(toggleStrikethrough), [
|
|
30
|
+
applyFormat
|
|
31
|
+
]);
|
|
32
|
+
const handleBulletList = useCallback(()=>applyFormat(toggleBulletList), [
|
|
33
|
+
applyFormat
|
|
34
|
+
]);
|
|
35
|
+
const handleNumberedList = useCallback(()=>applyFormat(toggleNumberedList), [
|
|
36
|
+
applyFormat
|
|
37
|
+
]);
|
|
38
|
+
const mod = getModifierKey();
|
|
39
|
+
const shift = isMac() ? '⇧' : '+Shift+';
|
|
40
|
+
return /*#__PURE__*/ jsxs(FormattingToolbarContainer, {
|
|
41
|
+
borderColor: borderColor,
|
|
42
|
+
onMouseDown: (e)=>e.preventDefault(),
|
|
43
|
+
className: "nodrag nowheel",
|
|
44
|
+
children: [
|
|
45
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
46
|
+
content: `Bold (${mod}+B)`,
|
|
47
|
+
placement: "top",
|
|
48
|
+
delay: true,
|
|
49
|
+
children: /*#__PURE__*/ jsx(FormattingButton, {
|
|
50
|
+
isActive: activeFormats.bold,
|
|
51
|
+
onClick: handleBold,
|
|
52
|
+
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
53
|
+
icon: "bold",
|
|
54
|
+
size: 14
|
|
55
|
+
})
|
|
56
|
+
})
|
|
57
|
+
}),
|
|
58
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
59
|
+
content: `Italic (${mod}+I)`,
|
|
60
|
+
placement: "top",
|
|
61
|
+
delay: true,
|
|
62
|
+
children: /*#__PURE__*/ jsx(FormattingButton, {
|
|
63
|
+
isActive: activeFormats.italic,
|
|
64
|
+
onClick: handleItalic,
|
|
65
|
+
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
66
|
+
icon: "italic",
|
|
67
|
+
size: 14
|
|
68
|
+
})
|
|
69
|
+
})
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
72
|
+
content: `Strikethrough (${mod}${shift}X)`,
|
|
73
|
+
placement: "top",
|
|
74
|
+
delay: true,
|
|
75
|
+
children: /*#__PURE__*/ jsx(FormattingButton, {
|
|
76
|
+
isActive: activeFormats.strikethrough,
|
|
77
|
+
onClick: handleStrikethrough,
|
|
78
|
+
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
79
|
+
icon: "strikethrough",
|
|
80
|
+
size: 14
|
|
81
|
+
})
|
|
82
|
+
})
|
|
83
|
+
}),
|
|
84
|
+
/*#__PURE__*/ jsx(ToolbarSeparator, {}),
|
|
85
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
86
|
+
content: "Bullet list",
|
|
87
|
+
placement: "top",
|
|
88
|
+
delay: true,
|
|
89
|
+
children: /*#__PURE__*/ jsx(FormattingButton, {
|
|
90
|
+
isActive: activeFormats.bulletList,
|
|
91
|
+
onClick: handleBulletList,
|
|
92
|
+
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
93
|
+
icon: "list",
|
|
94
|
+
size: 14
|
|
95
|
+
})
|
|
96
|
+
})
|
|
97
|
+
}),
|
|
98
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
99
|
+
content: "Numbered list",
|
|
100
|
+
placement: "top",
|
|
101
|
+
delay: true,
|
|
102
|
+
children: /*#__PURE__*/ jsx(FormattingButton, {
|
|
103
|
+
isActive: activeFormats.numberedList,
|
|
104
|
+
onClick: handleNumberedList,
|
|
105
|
+
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
106
|
+
icon: "list-ordered",
|
|
107
|
+
size: 14
|
|
108
|
+
})
|
|
109
|
+
})
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
const FormattingToolbar = /*#__PURE__*/ memo(FormattingToolbarComponent);
|
|
115
|
+
export { FormattingToolbar };
|
|
@@ -47,9 +47,12 @@ const external_remark_gfm_namespaceObject = require("remark-gfm");
|
|
|
47
47
|
var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
|
|
48
48
|
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
49
49
|
const index_cjs_namespaceObject = require("../Toolbar/index.cjs");
|
|
50
|
+
const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
|
|
51
|
+
const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
|
|
50
52
|
const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
|
|
51
53
|
const external_StickyNoteNode_types_cjs_namespaceObject = require("./StickyNoteNode.types.cjs");
|
|
52
54
|
const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
|
|
55
|
+
const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdownShortcuts.cjs");
|
|
53
56
|
const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
|
|
54
57
|
const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
|
|
55
58
|
const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
|
|
@@ -60,6 +63,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
60
63
|
const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
|
|
61
64
|
const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
|
|
62
65
|
const colorButtonRef = (0, external_react_namespaceObject.useRef)(null);
|
|
66
|
+
const [activeFormats, setActiveFormats] = (0, external_react_namespaceObject.useState)({
|
|
67
|
+
bold: false,
|
|
68
|
+
italic: false,
|
|
69
|
+
strikethrough: false,
|
|
70
|
+
bulletList: false,
|
|
71
|
+
numberedList: false
|
|
72
|
+
});
|
|
63
73
|
const colorKey = data.color || 'yellow';
|
|
64
74
|
const color = external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS[colorKey] ?? external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS.yellow;
|
|
65
75
|
const colorWithAlpha = (0, external_StickyNoteNode_types_cjs_namespaceObject.withAlpha)(color);
|
|
@@ -89,6 +99,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
89
99
|
isResizing
|
|
90
100
|
]);
|
|
91
101
|
const handleDoubleClick = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
102
|
+
if (isEditing) return;
|
|
92
103
|
setIsEditing(true);
|
|
93
104
|
setTimeout(()=>{
|
|
94
105
|
if (textAreaRef.current) {
|
|
@@ -96,7 +107,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
96
107
|
textAreaRef.current.select();
|
|
97
108
|
}
|
|
98
109
|
}, 0);
|
|
99
|
-
}, [
|
|
110
|
+
}, [
|
|
111
|
+
isEditing
|
|
112
|
+
]);
|
|
100
113
|
const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
101
114
|
setIsEditing(false);
|
|
102
115
|
if (localContent !== data.content) updateNodeData(id, {
|
|
@@ -111,14 +124,53 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
111
124
|
const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
112
125
|
setLocalContent(e.target.value);
|
|
113
126
|
}, []);
|
|
127
|
+
const handleFormat = (0, external_react_namespaceObject.useCallback)((result)=>{
|
|
128
|
+
setLocalContent(result.value);
|
|
129
|
+
setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(result));
|
|
130
|
+
requestAnimationFrame(()=>{
|
|
131
|
+
if (textAreaRef.current) {
|
|
132
|
+
textAreaRef.current.selectionStart = result.selectionStart;
|
|
133
|
+
textAreaRef.current.selectionEnd = result.selectionEnd;
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}, []);
|
|
137
|
+
const updateActiveFormats = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
138
|
+
if (!textAreaRef.current) return;
|
|
139
|
+
const next = (0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)({
|
|
140
|
+
value: textAreaRef.current.value,
|
|
141
|
+
selectionStart: textAreaRef.current.selectionStart,
|
|
142
|
+
selectionEnd: textAreaRef.current.selectionEnd
|
|
143
|
+
});
|
|
144
|
+
setActiveFormats((prev)=>(0, external_markdown_formatting_index_cjs_namespaceObject.activeFormatsEqual)(prev, next) ? prev : next);
|
|
145
|
+
}, []);
|
|
146
|
+
const shortcutKeyDown = (0, external_useMarkdownShortcuts_cjs_namespaceObject.useMarkdownShortcuts)(textAreaRef, handleFormat);
|
|
114
147
|
const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
115
148
|
if ('Escape' === e.key) {
|
|
116
149
|
setIsEditing(false);
|
|
117
150
|
setLocalContent(data.content || '');
|
|
118
151
|
textAreaRef.current?.blur();
|
|
152
|
+
return;
|
|
119
153
|
}
|
|
154
|
+
if ('Enter' === e.key && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
|
|
155
|
+
const textarea = textAreaRef.current;
|
|
156
|
+
if (textarea) {
|
|
157
|
+
const result = (0, external_markdown_formatting_index_cjs_namespaceObject.continueListOnEnter)({
|
|
158
|
+
value: textarea.value,
|
|
159
|
+
selectionStart: textarea.selectionStart,
|
|
160
|
+
selectionEnd: textarea.selectionEnd
|
|
161
|
+
});
|
|
162
|
+
if (result) {
|
|
163
|
+
e.preventDefault();
|
|
164
|
+
handleFormat(result);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
shortcutKeyDown(e);
|
|
120
170
|
}, [
|
|
121
|
-
data.content
|
|
171
|
+
data.content,
|
|
172
|
+
shortcutKeyDown,
|
|
173
|
+
handleFormat
|
|
122
174
|
]);
|
|
123
175
|
const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
124
176
|
setIsResizing(true);
|
|
@@ -310,16 +362,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
310
362
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.BottomCornerIndicators, {
|
|
311
363
|
selected: selected
|
|
312
364
|
}),
|
|
313
|
-
isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
365
|
+
isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
366
|
+
children: [
|
|
367
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormattingToolbar_cjs_namespaceObject.FormattingToolbar, {
|
|
368
|
+
textAreaRef: textAreaRef,
|
|
369
|
+
borderColor: color,
|
|
370
|
+
activeFormats: activeFormats,
|
|
371
|
+
onFormat: handleFormat
|
|
372
|
+
}),
|
|
373
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteTextArea, {
|
|
374
|
+
ref: textAreaRef,
|
|
375
|
+
value: localContent,
|
|
376
|
+
onChange: handleChange,
|
|
377
|
+
onBlur: handleBlur,
|
|
378
|
+
onKeyDown: handleKeyDown,
|
|
379
|
+
onSelect: updateActiveFormats,
|
|
380
|
+
onKeyUp: updateActiveFormats,
|
|
381
|
+
placeholder: placeholder,
|
|
382
|
+
isEditing: isEditing,
|
|
383
|
+
className: "nodrag nowheel"
|
|
384
|
+
})
|
|
385
|
+
]
|
|
323
386
|
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteMarkdown, {
|
|
324
387
|
children: localContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
|
|
325
388
|
remarkPlugins: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA6B1E,OAAO,KAAK,EAAmB,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAK7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAsXD,eAAO,MAAM,cAAc,kHA1WxB,mBAAmB,6CA0WqC,CAAC"}
|
|
@@ -8,9 +8,12 @@ import react_markdown from "react-markdown";
|
|
|
8
8
|
import remark_gfm from "remark-gfm";
|
|
9
9
|
import { GRID_SPACING } from "../../constants.js";
|
|
10
10
|
import { NodeToolbar } from "../Toolbar/index.js";
|
|
11
|
+
import { FormattingToolbar } from "./FormattingToolbar.js";
|
|
12
|
+
import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
|
|
11
13
|
import { BottomCornerIndicators, ColorOption, ColorPickerPanel, RESIZE_CONTROL_Z_INDEX, ResizeHandle, StickyNoteContainer, StickyNoteMarkdown, StickyNoteTextArea, StickyNoteWrapper, TopCornerIndicators, stickyNoteGlobalStyles } from "./StickyNoteNode.styles.js";
|
|
12
14
|
import { STICKY_NOTE_COLORS, withAlpha } from "./StickyNoteNode.types.js";
|
|
13
15
|
import { preserveNewlines } from "./StickyNoteNode.utils.js";
|
|
16
|
+
import { useMarkdownShortcuts } from "./useMarkdownShortcuts.js";
|
|
14
17
|
const minWidth = 8 * GRID_SPACING;
|
|
15
18
|
const minHeight = 8 * GRID_SPACING;
|
|
16
19
|
const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
|
|
@@ -21,6 +24,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
21
24
|
const [localContent, setLocalContent] = useState(data.content || '');
|
|
22
25
|
const textAreaRef = useRef(null);
|
|
23
26
|
const colorButtonRef = useRef(null);
|
|
27
|
+
const [activeFormats, setActiveFormats] = useState({
|
|
28
|
+
bold: false,
|
|
29
|
+
italic: false,
|
|
30
|
+
strikethrough: false,
|
|
31
|
+
bulletList: false,
|
|
32
|
+
numberedList: false
|
|
33
|
+
});
|
|
24
34
|
const colorKey = data.color || 'yellow';
|
|
25
35
|
const color = STICKY_NOTE_COLORS[colorKey] ?? STICKY_NOTE_COLORS.yellow;
|
|
26
36
|
const colorWithAlpha = withAlpha(color);
|
|
@@ -50,6 +60,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
50
60
|
isResizing
|
|
51
61
|
]);
|
|
52
62
|
const handleDoubleClick = useCallback(()=>{
|
|
63
|
+
if (isEditing) return;
|
|
53
64
|
setIsEditing(true);
|
|
54
65
|
setTimeout(()=>{
|
|
55
66
|
if (textAreaRef.current) {
|
|
@@ -57,7 +68,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
57
68
|
textAreaRef.current.select();
|
|
58
69
|
}
|
|
59
70
|
}, 0);
|
|
60
|
-
}, [
|
|
71
|
+
}, [
|
|
72
|
+
isEditing
|
|
73
|
+
]);
|
|
61
74
|
const handleBlur = useCallback(()=>{
|
|
62
75
|
setIsEditing(false);
|
|
63
76
|
if (localContent !== data.content) updateNodeData(id, {
|
|
@@ -72,14 +85,53 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
72
85
|
const handleChange = useCallback((e)=>{
|
|
73
86
|
setLocalContent(e.target.value);
|
|
74
87
|
}, []);
|
|
88
|
+
const handleFormat = useCallback((result)=>{
|
|
89
|
+
setLocalContent(result.value);
|
|
90
|
+
setActiveFormats(detectActiveFormats(result));
|
|
91
|
+
requestAnimationFrame(()=>{
|
|
92
|
+
if (textAreaRef.current) {
|
|
93
|
+
textAreaRef.current.selectionStart = result.selectionStart;
|
|
94
|
+
textAreaRef.current.selectionEnd = result.selectionEnd;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}, []);
|
|
98
|
+
const updateActiveFormats = useCallback(()=>{
|
|
99
|
+
if (!textAreaRef.current) return;
|
|
100
|
+
const next = detectActiveFormats({
|
|
101
|
+
value: textAreaRef.current.value,
|
|
102
|
+
selectionStart: textAreaRef.current.selectionStart,
|
|
103
|
+
selectionEnd: textAreaRef.current.selectionEnd
|
|
104
|
+
});
|
|
105
|
+
setActiveFormats((prev)=>activeFormatsEqual(prev, next) ? prev : next);
|
|
106
|
+
}, []);
|
|
107
|
+
const shortcutKeyDown = useMarkdownShortcuts(textAreaRef, handleFormat);
|
|
75
108
|
const handleKeyDown = useCallback((e)=>{
|
|
76
109
|
if ('Escape' === e.key) {
|
|
77
110
|
setIsEditing(false);
|
|
78
111
|
setLocalContent(data.content || '');
|
|
79
112
|
textAreaRef.current?.blur();
|
|
113
|
+
return;
|
|
80
114
|
}
|
|
115
|
+
if ('Enter' === e.key && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
|
|
116
|
+
const textarea = textAreaRef.current;
|
|
117
|
+
if (textarea) {
|
|
118
|
+
const result = continueListOnEnter({
|
|
119
|
+
value: textarea.value,
|
|
120
|
+
selectionStart: textarea.selectionStart,
|
|
121
|
+
selectionEnd: textarea.selectionEnd
|
|
122
|
+
});
|
|
123
|
+
if (result) {
|
|
124
|
+
e.preventDefault();
|
|
125
|
+
handleFormat(result);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
shortcutKeyDown(e);
|
|
81
131
|
}, [
|
|
82
|
-
data.content
|
|
132
|
+
data.content,
|
|
133
|
+
shortcutKeyDown,
|
|
134
|
+
handleFormat
|
|
83
135
|
]);
|
|
84
136
|
const handleResizeStart = useCallback(()=>{
|
|
85
137
|
setIsResizing(true);
|
|
@@ -271,16 +323,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
|
|
|
271
323
|
/*#__PURE__*/ jsx(BottomCornerIndicators, {
|
|
272
324
|
selected: selected
|
|
273
325
|
}),
|
|
274
|
-
isEditing ? /*#__PURE__*/
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
326
|
+
isEditing ? /*#__PURE__*/ jsxs(Fragment, {
|
|
327
|
+
children: [
|
|
328
|
+
/*#__PURE__*/ jsx(FormattingToolbar, {
|
|
329
|
+
textAreaRef: textAreaRef,
|
|
330
|
+
borderColor: color,
|
|
331
|
+
activeFormats: activeFormats,
|
|
332
|
+
onFormat: handleFormat
|
|
333
|
+
}),
|
|
334
|
+
/*#__PURE__*/ jsx(StickyNoteTextArea, {
|
|
335
|
+
ref: textAreaRef,
|
|
336
|
+
value: localContent,
|
|
337
|
+
onChange: handleChange,
|
|
338
|
+
onBlur: handleBlur,
|
|
339
|
+
onKeyDown: handleKeyDown,
|
|
340
|
+
onSelect: updateActiveFormats,
|
|
341
|
+
onKeyUp: updateActiveFormats,
|
|
342
|
+
placeholder: placeholder,
|
|
343
|
+
isEditing: isEditing,
|
|
344
|
+
className: "nodrag nowheel"
|
|
345
|
+
})
|
|
346
|
+
]
|
|
284
347
|
}) : /*#__PURE__*/ jsx(StickyNoteMarkdown, {
|
|
285
348
|
children: localContent ? /*#__PURE__*/ jsx(react_markdown, {
|
|
286
349
|
remarkPlugins: [
|
|
@@ -33,18 +33,21 @@ var __webpack_require__ = {};
|
|
|
33
33
|
var __webpack_exports__ = {};
|
|
34
34
|
__webpack_require__.r(__webpack_exports__);
|
|
35
35
|
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
-
|
|
37
|
-
StickyNoteTextArea: ()=>StickyNoteTextArea,
|
|
36
|
+
stickyNoteGlobalStyles: ()=>stickyNoteGlobalStyles,
|
|
38
37
|
STICKY_NOTE_BELOW_EDGE_Z_INDEX: ()=>STICKY_NOTE_BELOW_EDGE_Z_INDEX,
|
|
39
38
|
StickyNoteMarkdown: ()=>StickyNoteMarkdown,
|
|
40
|
-
TopCornerIndicators: ()=>TopCornerIndicators,
|
|
41
|
-
stickyNoteGlobalStyles: ()=>stickyNoteGlobalStyles,
|
|
42
39
|
RESIZE_CONTROL_Z_INDEX: ()=>RESIZE_CONTROL_Z_INDEX,
|
|
43
40
|
StickyNoteWrapper: ()=>StickyNoteWrapper,
|
|
44
41
|
ResizeHandle: ()=>ResizeHandle,
|
|
45
42
|
StickyNoteContainer: ()=>StickyNoteContainer,
|
|
46
|
-
|
|
47
|
-
BottomCornerIndicators: ()=>BottomCornerIndicators
|
|
43
|
+
ToolbarSeparator: ()=>ToolbarSeparator,
|
|
44
|
+
BottomCornerIndicators: ()=>BottomCornerIndicators,
|
|
45
|
+
StickyNoteTextArea: ()=>StickyNoteTextArea,
|
|
46
|
+
FormattingToolbarContainer: ()=>FormattingToolbarContainer,
|
|
47
|
+
ColorPickerPanel: ()=>ColorPickerPanel,
|
|
48
|
+
FormattingButton: ()=>FormattingButton,
|
|
49
|
+
TopCornerIndicators: ()=>TopCornerIndicators,
|
|
50
|
+
ColorOption: ()=>ColorOption
|
|
48
51
|
});
|
|
49
52
|
const react_namespaceObject = require("@emotion/react");
|
|
50
53
|
const styled_namespaceObject = require("@emotion/styled");
|
|
@@ -98,7 +101,9 @@ const StickyNoteContainer = styled_default().div`
|
|
|
98
101
|
background-color: ${(props)=>props.backgroundColor};
|
|
99
102
|
border-radius: 16px;
|
|
100
103
|
border: 2px solid ${(props)=>props.borderColor};
|
|
101
|
-
padding: 16px;
|
|
104
|
+
padding: ${(props)=>props.isEditing ? '8px' : '16px'} 16px 16px 16px;
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
102
107
|
cursor: ${(props)=>props.isEditing ? 'text' : 'move'};
|
|
103
108
|
position: relative;
|
|
104
109
|
/* Ensure resize handles are clickable */
|
|
@@ -111,6 +116,8 @@ const StickyNoteContainer = styled_default().div`
|
|
|
111
116
|
}
|
|
112
117
|
`;
|
|
113
118
|
const StickyNoteTextArea = styled_default().textarea`
|
|
119
|
+
flex: 1;
|
|
120
|
+
min-height: 0;
|
|
114
121
|
${stickyNoteContentStyles}
|
|
115
122
|
|
|
116
123
|
background: transparent;
|
|
@@ -132,6 +139,8 @@ const StickyNoteTextArea = styled_default().textarea`
|
|
|
132
139
|
}
|
|
133
140
|
`;
|
|
134
141
|
const StickyNoteMarkdown = styled_default().div`
|
|
142
|
+
flex: 1;
|
|
143
|
+
min-height: 0;
|
|
135
144
|
${stickyNoteContentStyles}
|
|
136
145
|
|
|
137
146
|
word-wrap: break-word;
|
|
@@ -365,9 +374,43 @@ const ColorOption = styled_default().button`
|
|
|
365
374
|
outline-offset: 1px;
|
|
366
375
|
}
|
|
367
376
|
`;
|
|
377
|
+
const FormattingToolbarContainer = styled_default().div`
|
|
378
|
+
display: flex;
|
|
379
|
+
align-items: center;
|
|
380
|
+
gap: 1px;
|
|
381
|
+
padding-bottom: 4px;
|
|
382
|
+
margin-bottom: 8px;
|
|
383
|
+
border-bottom: 1px solid ${(props)=>`color-mix(in srgb, ${props.borderColor} 30%, transparent)`};
|
|
384
|
+
flex-shrink: 0;
|
|
385
|
+
`;
|
|
386
|
+
const FormattingButton = styled_default().button`
|
|
387
|
+
width: 28px;
|
|
388
|
+
height: 28px;
|
|
389
|
+
display: flex;
|
|
390
|
+
align-items: center;
|
|
391
|
+
justify-content: center;
|
|
392
|
+
border: none;
|
|
393
|
+
border-radius: 4px;
|
|
394
|
+
cursor: pointer;
|
|
395
|
+
padding: 0;
|
|
396
|
+
color: var(--uix-canvas-foreground);
|
|
397
|
+
background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 30%, transparent)' : 'transparent'};
|
|
398
|
+
|
|
399
|
+
&:hover {
|
|
400
|
+
background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 40%, transparent)' : 'color-mix(in srgb, var(--uix-canvas-foreground) 10%, transparent)'};
|
|
401
|
+
}
|
|
402
|
+
`;
|
|
403
|
+
const ToolbarSeparator = styled_default().div`
|
|
404
|
+
width: 1px;
|
|
405
|
+
height: 16px;
|
|
406
|
+
background: color-mix(in srgb, var(--uix-canvas-foreground) 15%, transparent);
|
|
407
|
+
margin: 0 4px;
|
|
408
|
+
`;
|
|
368
409
|
exports.BottomCornerIndicators = __webpack_exports__.BottomCornerIndicators;
|
|
369
410
|
exports.ColorOption = __webpack_exports__.ColorOption;
|
|
370
411
|
exports.ColorPickerPanel = __webpack_exports__.ColorPickerPanel;
|
|
412
|
+
exports.FormattingButton = __webpack_exports__.FormattingButton;
|
|
413
|
+
exports.FormattingToolbarContainer = __webpack_exports__.FormattingToolbarContainer;
|
|
371
414
|
exports.RESIZE_CONTROL_Z_INDEX = __webpack_exports__.RESIZE_CONTROL_Z_INDEX;
|
|
372
415
|
exports.ResizeHandle = __webpack_exports__.ResizeHandle;
|
|
373
416
|
exports.STICKY_NOTE_BELOW_EDGE_Z_INDEX = __webpack_exports__.STICKY_NOTE_BELOW_EDGE_Z_INDEX;
|
|
@@ -375,12 +418,15 @@ exports.StickyNoteContainer = __webpack_exports__.StickyNoteContainer;
|
|
|
375
418
|
exports.StickyNoteMarkdown = __webpack_exports__.StickyNoteMarkdown;
|
|
376
419
|
exports.StickyNoteTextArea = __webpack_exports__.StickyNoteTextArea;
|
|
377
420
|
exports.StickyNoteWrapper = __webpack_exports__.StickyNoteWrapper;
|
|
421
|
+
exports.ToolbarSeparator = __webpack_exports__.ToolbarSeparator;
|
|
378
422
|
exports.TopCornerIndicators = __webpack_exports__.TopCornerIndicators;
|
|
379
423
|
exports.stickyNoteGlobalStyles = __webpack_exports__.stickyNoteGlobalStyles;
|
|
380
424
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
381
425
|
"BottomCornerIndicators",
|
|
382
426
|
"ColorOption",
|
|
383
427
|
"ColorPickerPanel",
|
|
428
|
+
"FormattingButton",
|
|
429
|
+
"FormattingToolbarContainer",
|
|
384
430
|
"RESIZE_CONTROL_Z_INDEX",
|
|
385
431
|
"ResizeHandle",
|
|
386
432
|
"STICKY_NOTE_BELOW_EDGE_Z_INDEX",
|
|
@@ -388,6 +434,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
|
388
434
|
"StickyNoteMarkdown",
|
|
389
435
|
"StickyNoteTextArea",
|
|
390
436
|
"StickyNoteWrapper",
|
|
437
|
+
"ToolbarSeparator",
|
|
391
438
|
"TopCornerIndicators",
|
|
392
439
|
"stickyNoteGlobalStyles"
|
|
393
440
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
@@ -53,4 +53,20 @@ export declare const ColorOption: import("@emotion/styled").StyledComponent<{
|
|
|
53
53
|
color: string;
|
|
54
54
|
isSelected: boolean;
|
|
55
55
|
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
56
|
+
export declare const FormattingToolbarContainer: import("@emotion/styled").StyledComponent<{
|
|
57
|
+
theme?: import("@emotion/react").Theme;
|
|
58
|
+
as?: React.ElementType;
|
|
59
|
+
} & {
|
|
60
|
+
borderColor: string;
|
|
61
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
62
|
+
export declare const FormattingButton: import("@emotion/styled").StyledComponent<{
|
|
63
|
+
theme?: import("@emotion/react").Theme;
|
|
64
|
+
as?: React.ElementType;
|
|
65
|
+
} & {
|
|
66
|
+
isActive: boolean;
|
|
67
|
+
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
68
|
+
export declare const ToolbarSeparator: import("@emotion/styled").StyledComponent<{
|
|
69
|
+
theme?: import("@emotion/react").Theme;
|
|
70
|
+
as?: React.ElementType;
|
|
71
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
56
72
|
//# sourceMappingURL=StickyNoteNode.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;
|
|
1
|
+
{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;yGAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;eAA2B,OAAO;yGA+BjE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;eAA2B,OAAO;yGA+BpE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAsBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}
|
|
@@ -49,7 +49,9 @@ const StickyNoteContainer = styled.div`
|
|
|
49
49
|
background-color: ${(props)=>props.backgroundColor};
|
|
50
50
|
border-radius: 16px;
|
|
51
51
|
border: 2px solid ${(props)=>props.borderColor};
|
|
52
|
-
padding: 16px;
|
|
52
|
+
padding: ${(props)=>props.isEditing ? '8px' : '16px'} 16px 16px 16px;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
53
55
|
cursor: ${(props)=>props.isEditing ? 'text' : 'move'};
|
|
54
56
|
position: relative;
|
|
55
57
|
/* Ensure resize handles are clickable */
|
|
@@ -62,6 +64,8 @@ const StickyNoteContainer = styled.div`
|
|
|
62
64
|
}
|
|
63
65
|
`;
|
|
64
66
|
const StickyNoteTextArea = styled.textarea`
|
|
67
|
+
flex: 1;
|
|
68
|
+
min-height: 0;
|
|
65
69
|
${stickyNoteContentStyles}
|
|
66
70
|
|
|
67
71
|
background: transparent;
|
|
@@ -83,6 +87,8 @@ const StickyNoteTextArea = styled.textarea`
|
|
|
83
87
|
}
|
|
84
88
|
`;
|
|
85
89
|
const StickyNoteMarkdown = styled.div`
|
|
90
|
+
flex: 1;
|
|
91
|
+
min-height: 0;
|
|
86
92
|
${stickyNoteContentStyles}
|
|
87
93
|
|
|
88
94
|
word-wrap: break-word;
|
|
@@ -316,4 +322,36 @@ const ColorOption = styled.button`
|
|
|
316
322
|
outline-offset: 1px;
|
|
317
323
|
}
|
|
318
324
|
`;
|
|
319
|
-
|
|
325
|
+
const FormattingToolbarContainer = styled.div`
|
|
326
|
+
display: flex;
|
|
327
|
+
align-items: center;
|
|
328
|
+
gap: 1px;
|
|
329
|
+
padding-bottom: 4px;
|
|
330
|
+
margin-bottom: 8px;
|
|
331
|
+
border-bottom: 1px solid ${(props)=>`color-mix(in srgb, ${props.borderColor} 30%, transparent)`};
|
|
332
|
+
flex-shrink: 0;
|
|
333
|
+
`;
|
|
334
|
+
const FormattingButton = styled.button`
|
|
335
|
+
width: 28px;
|
|
336
|
+
height: 28px;
|
|
337
|
+
display: flex;
|
|
338
|
+
align-items: center;
|
|
339
|
+
justify-content: center;
|
|
340
|
+
border: none;
|
|
341
|
+
border-radius: 4px;
|
|
342
|
+
cursor: pointer;
|
|
343
|
+
padding: 0;
|
|
344
|
+
color: var(--uix-canvas-foreground);
|
|
345
|
+
background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 30%, transparent)' : 'transparent'};
|
|
346
|
+
|
|
347
|
+
&:hover {
|
|
348
|
+
background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 40%, transparent)' : 'color-mix(in srgb, var(--uix-canvas-foreground) 10%, transparent)'};
|
|
349
|
+
}
|
|
350
|
+
`;
|
|
351
|
+
const ToolbarSeparator = styled.div`
|
|
352
|
+
width: 1px;
|
|
353
|
+
height: 16px;
|
|
354
|
+
background: color-mix(in srgb, var(--uix-canvas-foreground) 15%, transparent);
|
|
355
|
+
margin: 0 4px;
|
|
356
|
+
`;
|
|
357
|
+
export { BottomCornerIndicators, ColorOption, ColorPickerPanel, FormattingButton, FormattingToolbarContainer, RESIZE_CONTROL_Z_INDEX, ResizeHandle, STICKY_NOTE_BELOW_EDGE_Z_INDEX, StickyNoteContainer, StickyNoteMarkdown, StickyNoteTextArea, StickyNoteWrapper, ToolbarSeparator, TopCornerIndicators, stickyNoteGlobalStyles };
|
|
@@ -24,6 +24,8 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
getModifierKey: ()=>getModifierKey,
|
|
28
|
+
isMac: ()=>isMac,
|
|
27
29
|
preserveNewlines: ()=>preserveNewlines
|
|
28
30
|
});
|
|
29
31
|
const preserveNewlines = (markdown)=>{
|
|
@@ -39,8 +41,14 @@ const preserveNewlines = (markdown)=>{
|
|
|
39
41
|
result = result.replace(/%%CODE_BLOCK_(\d+)%%/g, (_, i)=>codeBlocks[Number(i)] ?? '');
|
|
40
42
|
return result;
|
|
41
43
|
};
|
|
44
|
+
const isMac = ()=>"u" > typeof navigator && navigator.platform.includes('Mac');
|
|
45
|
+
const getModifierKey = ()=>isMac() ? '⌘' : 'Ctrl';
|
|
46
|
+
exports.getModifierKey = __webpack_exports__.getModifierKey;
|
|
47
|
+
exports.isMac = __webpack_exports__.isMac;
|
|
42
48
|
exports.preserveNewlines = __webpack_exports__.preserveNewlines;
|
|
43
49
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
50
|
+
"getModifierKey",
|
|
51
|
+
"isMac",
|
|
44
52
|
"preserveNewlines"
|
|
45
53
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
46
54
|
Object.defineProperty(exports, '__esModule', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyNoteNode.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,KAAG,MAqBnD,CAAC"}
|
|
1
|
+
{"version":3,"file":"StickyNoteNode.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,KAAG,MAqBnD,CAAC;AAOF,eAAO,MAAM,KAAK,QAAO,OAExB,CAAC;AAOF,eAAO,MAAM,cAAc,QAAO,MAEjC,CAAC"}
|
|
@@ -11,4 +11,6 @@ const preserveNewlines = (markdown)=>{
|
|
|
11
11
|
result = result.replace(/%%CODE_BLOCK_(\d+)%%/g, (_, i)=>codeBlocks[Number(i)] ?? '');
|
|
12
12
|
return result;
|
|
13
13
|
};
|
|
14
|
-
|
|
14
|
+
const isMac = ()=>"u" > typeof navigator && navigator.platform.includes('Mac');
|
|
15
|
+
const getModifierKey = ()=>isMac() ? '⌘' : 'Ctrl';
|
|
16
|
+
export { getModifierKey, isMac, preserveNewlines };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
useMarkdownShortcuts: ()=>useMarkdownShortcuts
|
|
28
|
+
});
|
|
29
|
+
const external_react_namespaceObject = require("react");
|
|
30
|
+
const index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
|
|
31
|
+
function useMarkdownShortcuts(textAreaRef, onFormat) {
|
|
32
|
+
return (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
33
|
+
const textarea = textAreaRef.current;
|
|
34
|
+
if (!textarea) return;
|
|
35
|
+
const metaOrCtrl = e.metaKey || e.ctrlKey;
|
|
36
|
+
if (!metaOrCtrl) return;
|
|
37
|
+
let formatFn = null;
|
|
38
|
+
if ('b' !== e.key || e.shiftKey) if ('i' !== e.key || e.shiftKey) {
|
|
39
|
+
if ('x' === e.key && e.shiftKey) formatFn = index_cjs_namespaceObject.toggleStrikethrough;
|
|
40
|
+
} else formatFn = index_cjs_namespaceObject.toggleItalic;
|
|
41
|
+
else formatFn = index_cjs_namespaceObject.toggleBold;
|
|
42
|
+
if (formatFn) {
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
const input = {
|
|
45
|
+
value: textarea.value,
|
|
46
|
+
selectionStart: textarea.selectionStart,
|
|
47
|
+
selectionEnd: textarea.selectionEnd
|
|
48
|
+
};
|
|
49
|
+
onFormat(formatFn(input));
|
|
50
|
+
}
|
|
51
|
+
}, [
|
|
52
|
+
textAreaRef,
|
|
53
|
+
onFormat
|
|
54
|
+
]);
|
|
55
|
+
}
|
|
56
|
+
exports.useMarkdownShortcuts = __webpack_exports__.useMarkdownShortcuts;
|
|
57
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
58
|
+
"useMarkdownShortcuts"
|
|
59
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
60
|
+
Object.defineProperty(exports, '__esModule', {
|
|
61
|
+
value: true
|
|
62
|
+
});
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
import type { TextSelection } from './StickyNoteNode.types';
|
|
3
|
+
export declare function useMarkdownShortcuts(textAreaRef: RefObject<HTMLTextAreaElement | null>, onFormat: (result: TextSelection) => void): (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
4
|
+
//# sourceMappingURL=useMarkdownShortcuts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMarkdownShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/useMarkdownShortcuts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM5D,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,EAClD,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,OAGnC,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,UA6B/C"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
import { toggleBold, toggleItalic, toggleStrikethrough } from "./markdown-formatting/index.js";
|
|
3
|
+
function useMarkdownShortcuts(textAreaRef, onFormat) {
|
|
4
|
+
return useCallback((e)=>{
|
|
5
|
+
const textarea = textAreaRef.current;
|
|
6
|
+
if (!textarea) return;
|
|
7
|
+
const metaOrCtrl = e.metaKey || e.ctrlKey;
|
|
8
|
+
if (!metaOrCtrl) return;
|
|
9
|
+
let formatFn = null;
|
|
10
|
+
if ('b' !== e.key || e.shiftKey) if ('i' !== e.key || e.shiftKey) {
|
|
11
|
+
if ('x' === e.key && e.shiftKey) formatFn = toggleStrikethrough;
|
|
12
|
+
} else formatFn = toggleItalic;
|
|
13
|
+
else formatFn = toggleBold;
|
|
14
|
+
if (formatFn) {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
const input = {
|
|
17
|
+
value: textarea.value,
|
|
18
|
+
selectionStart: textarea.selectionStart,
|
|
19
|
+
selectionEnd: textarea.selectionEnd
|
|
20
|
+
};
|
|
21
|
+
onFormat(formatFn(input));
|
|
22
|
+
}
|
|
23
|
+
}, [
|
|
24
|
+
textAreaRef,
|
|
25
|
+
onFormat
|
|
26
|
+
]);
|
|
27
|
+
}
|
|
28
|
+
export { useMarkdownShortcuts };
|