@uiw/react-md-editor 4.1.7 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/mdeditor.js +3 -3
  2. package/dist/mdeditor.min.js +1 -1
  3. package/esm/Editor.factory.js +10 -7
  4. package/esm/commands/fullscreen.js +2 -0
  5. package/esm/components/Toolbar/index.js +1 -0
  6. package/lib/Editor.factory.js +10 -7
  7. package/lib/commands/fullscreen.js +2 -0
  8. package/lib/components/Toolbar/index.js +1 -0
  9. package/package.json +1 -1
  10. package/src/Editor.factory.tsx +11 -14
  11. package/src/commands/fullscreen.tsx +1 -1
  12. package/src/components/Toolbar/index.tsx +1 -0
package/esm/Editor.factory.js CHANGED
@@ -234,12 +234,15 @@ export function createMDEditor(options) {
234
234
  initScroll.current = true;
235
235
  }
236
236
  if (textareaDom && previewDom) {
237
- var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
238
- if (e.target === textareaDom && active.current === 'text') {
239
- previewDom.scrollTop = textareaDom.scrollTop / scale;
240
- }
241
- if (e.target === previewDom && active.current === 'preview') {
242
- textareaDom.scrollTop = previewDom.scrollTop * scale;
237
+ var inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
238
+ var previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
239
+ if (inputRange > 0 && previewRange > 0) {
240
+ if (e.target === textareaDom && active.current === 'text') {
241
+ previewDom.scrollTop = textareaDom.scrollTop / inputRange * previewRange;
242
+ }
243
+ if (e.target === previewDom && active.current === 'preview') {
244
+ textareaDom.scrollTop = previewDom.scrollTop / previewRange * inputRange;
245
+ }
243
246
  }
244
247
  var scrollTop = 0;
245
248
  if (active.current === 'text') {
@@ -259,9 +262,9 @@ export function createMDEditor(options) {
259
262
  var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
260
263
  ref: previewRef,
261
264
  className: previewClassName,
265
+ onScroll: handlePreviewScroll,
262
266
  children: /*#__PURE__*/_jsx(TimedPreview, _extends({}, previewOptions, {
263
267
  renderMsRef: previewRenderMs,
264
- onScroll: handlePreviewScroll,
265
268
  source: previewMarkdown
266
269
  }))
267
270
  }), [previewClassName, previewOptions, previewMarkdown]);
package/esm/commands/fullscreen.js CHANGED
@@ -13,6 +13,8 @@ export var fullscreen = {
13
13
  width: "12",
14
14
  height: "12",
15
15
  viewBox: "0 0 520 520",
16
+ "aria-hidden": "true",
17
+ focusable: "false",
16
18
  children: /*#__PURE__*/_jsx("path", {
17
19
  fill: "currentColor",
18
20
  d: "M118 171.133334L118 342.200271C118 353.766938 126.675 365.333605 141.133333 365.333605L382.634614 365.333605C394.201281 365.333605 405.767948 356.658605 405.767948 342.200271L405.767948 171.133334C405.767948 159.566667 397.092948 148 382.634614 148L141.133333 148C126.674999 148 117.999999 156.675 118 171.133334zM465.353591 413.444444L370 413.444444 370 471.222222 474.0221 471.222222C500.027624 471.222222 520.254143 451 520.254143 425L520.254143 321 462.464089 321 462.464089 413.444444 465.353591 413.444444zM471.0221 43L367 43 367 100.777778 462.353591 100.777778 462.353591 196.111111 520.143647 196.111111 520.143647 89.2222219C517.254144 63.2222219 497.027624 43 471.0221 43zM57.7900547 100.777778L153.143646 100.777778 153.143646 43 46.2320439 43C20.2265191 43 0 63.2222219 0 89.2222219L0 193.222222 57.7900547 193.222222 57.7900547 100.777778zM57.7900547 321L0 321 0 425C0 451 20.2265191 471.222222 46.2320439 471.222223L150.254143 471.222223 150.254143 413.444445 57.7900547 413.444445 57.7900547 321z"
package/esm/components/Toolbar/index.js CHANGED
@@ -89,6 +89,7 @@ export function ToolbarItems(props) {
89
89
  disabled,
90
90
  'data-name': item.name
91
91
  }, item.buttonProps, {
92
+ 'aria-pressed': item.keyCommand === 'fullscreen' ? !!fullscreen : undefined,
92
93
  onClick: evn => {
93
94
  evn.stopPropagation();
94
95
  handleClick(item, item.groupName);
package/lib/Editor.factory.js CHANGED
@@ -279,12 +279,15 @@ function createMDEditor(options) {
279
279
  initScroll.current = true;
280
280
  }
281
281
  if (textareaDom && previewDom) {
282
- var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
283
- if (e.target === textareaDom && active.current === 'text') {
284
- previewDom.scrollTop = textareaDom.scrollTop / scale;
285
- }
286
- if (e.target === previewDom && active.current === 'preview') {
287
- textareaDom.scrollTop = previewDom.scrollTop * scale;
282
+ var inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
283
+ var previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
284
+ if (inputRange > 0 && previewRange > 0) {
285
+ if (e.target === textareaDom && active.current === 'text') {
286
+ previewDom.scrollTop = textareaDom.scrollTop / inputRange * previewRange;
287
+ }
288
+ if (e.target === previewDom && active.current === 'preview') {
289
+ textareaDom.scrollTop = previewDom.scrollTop / previewRange * inputRange;
290
+ }
288
291
  }
289
292
  var scrollTop = 0;
290
293
  if (active.current === 'text') {
@@ -307,9 +310,9 @@ function createMDEditor(options) {
307
310
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
308
311
  ref: previewRef,
309
312
  className: previewClassName,
313
+ onScroll: handlePreviewScroll,
310
314
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimedPreview, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
311
315
  renderMsRef: previewRenderMs,
312
- onScroll: handlePreviewScroll,
313
316
  source: previewMarkdown
314
317
  }))
315
318
  });
package/lib/commands/fullscreen.js CHANGED
@@ -20,6 +20,8 @@ var fullscreen = exports.fullscreen = {
20
20
  width: "12",
21
21
  height: "12",
22
22
  viewBox: "0 0 520 520",
23
+ "aria-hidden": "true",
24
+ focusable: "false",
23
25
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
24
26
  fill: "currentColor",
25
27
  d: "M118 171.133334L118 342.200271C118 353.766938 126.675 365.333605 141.133333 365.333605L382.634614 365.333605C394.201281 365.333605 405.767948 356.658605 405.767948 342.200271L405.767948 171.133334C405.767948 159.566667 397.092948 148 382.634614 148L141.133333 148C126.674999 148 117.999999 156.675 118 171.133334zM465.353591 413.444444L370 413.444444 370 471.222222 474.0221 471.222222C500.027624 471.222222 520.254143 451 520.254143 425L520.254143 321 462.464089 321 462.464089 413.444444 465.353591 413.444444zM471.0221 43L367 43 367 100.777778 462.353591 100.777778 462.353591 196.111111 520.143647 196.111111 520.143647 89.2222219C517.254144 63.2222219 497.027624 43 471.0221 43zM57.7900547 100.777778L153.143646 100.777778 153.143646 43 46.2320439 43C20.2265191 43 0 63.2222219 0 89.2222219L0 193.222222 57.7900547 193.222222 57.7900547 100.777778zM57.7900547 321L0 321 0 425C0 451 20.2265191 471.222222 46.2320439 471.222223L150.254143 471.222223 150.254143 413.444445 57.7900547 413.444445 57.7900547 321z"
package/lib/components/Toolbar/index.js CHANGED
@@ -104,6 +104,7 @@ function ToolbarItems(props) {
104
104
  disabled: disabled,
105
105
  'data-name': item.name
106
106
  }, item.buttonProps), {}, {
107
+ 'aria-pressed': item.keyCommand === 'fullscreen' ? !!fullscreen : undefined,
107
108
  onClick: function onClick(evn) {
108
109
  evn.stopPropagation();
109
110
  handleClick(item, item.groupName);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-md-editor",
3
- "version": "4.1.7",
3
+ "version": "4.2.1",
4
4
  "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
5
5
  "homepage": "https://uiwjs.github.io/react-md-editor/",
6
6
  "funding": "https://jaywcjlove.github.io/#/sponsor",
package/src/Editor.factory.tsx CHANGED
@@ -232,13 +232,15 @@ export function createMDEditor<
232
232
  initScroll.current = true;
233
233
  }
234
234
  if (textareaDom && previewDom) {
235
- const scale =
236
- (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
237
- if (e.target === textareaDom && active.current === 'text') {
238
- previewDom.scrollTop = textareaDom.scrollTop / scale;
239
- }
240
- if (e.target === previewDom && active.current === 'preview') {
241
- textareaDom.scrollTop = previewDom.scrollTop * scale;
235
+ const inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
236
+ const previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
237
+ if (inputRange > 0 && previewRange > 0) {
238
+ if (e.target === textareaDom && active.current === 'text') {
239
+ previewDom.scrollTop = (textareaDom.scrollTop / inputRange) * previewRange;
240
+ }
241
+ if (e.target === previewDom && active.current === 'preview') {
242
+ textareaDom.scrollTop = (previewDom.scrollTop / previewRange) * inputRange;
243
+ }
242
244
  }
243
245
  let scrollTop = 0;
244
246
  if (active.current === 'text') {
@@ -256,13 +258,8 @@ export function createMDEditor<
256
258
  const previewMarkdown = useDeferredValue(usePreviewSource(state.markdown || '', previewRenderMs));
257
259
  let mdPreview = useMemo(
258
260
  () => (
259
- <div ref={previewRef} className={previewClassName}>
260
- <TimedPreview
261
- {...previewOptions}
262
- renderMsRef={previewRenderMs}
263
- onScroll={handlePreviewScroll}
264
- source={previewMarkdown}
265
- />
261
+ <div ref={previewRef} className={previewClassName} onScroll={handlePreviewScroll}>
262
+ <TimedPreview {...previewOptions} renderMsRef={previewRenderMs} source={previewMarkdown} />
266
263
  </div>
267
264
  ),
268
265
  [previewClassName, previewOptions, previewMarkdown],
package/src/commands/fullscreen.tsx CHANGED
@@ -9,7 +9,7 @@ export const fullscreen: ICommand = {
9
9
  value: 'fullscreen',
10
10
  buttonProps: { 'aria-label': 'Toggle fullscreen (ctrl + 0)', title: 'Toggle fullscreen (ctrl+ 0)' },
11
11
  icon: (
12
- <svg width="12" height="12" viewBox="0 0 520 520">
12
+ <svg width="12" height="12" viewBox="0 0 520 520" aria-hidden="true" focusable="false">
13
13
  <path
14
14
  fill="currentColor"
15
15
  d="M118 171.133334L118 342.200271C118 353.766938 126.675 365.333605 141.133333 365.333605L382.634614 365.333605C394.201281 365.333605 405.767948 356.658605 405.767948 342.200271L405.767948 171.133334C405.767948 159.566667 397.092948 148 382.634614 148L141.133333 148C126.674999 148 117.999999 156.675 118 171.133334zM465.353591 413.444444L370 413.444444 370 471.222222 474.0221 471.222222C500.027624 471.222222 520.254143 451 520.254143 425L520.254143 321 462.464089 321 462.464089 413.444444 465.353591 413.444444zM471.0221 43L367 43 367 100.777778 462.353591 100.777778 462.353591 196.111111 520.143647 196.111111 520.143647 89.2222219C517.254144 63.2222219 497.027624 43 471.0221 43zM57.7900547 100.777778L153.143646 100.777778 153.143646 43 46.2320439 43C20.2265191 43 0 63.2222219 0 89.2222219L0 193.222222 57.7900547 193.222222 57.7900547 100.777778zM57.7900547 321L0 321 0 425C0 451 20.2265191 471.222222 46.2320439 471.222223L150.254143 471.222223 150.254143 413.444445 57.7900547 413.444445 57.7900547 321z"
package/src/components/Toolbar/index.tsx CHANGED
@@ -100,6 +100,7 @@ export function ToolbarItems(props: IToolbarProps) {
100
100
  disabled,
101
101
  'data-name': item.name,
102
102
  ...item.buttonProps,
103
+ 'aria-pressed': item.keyCommand === 'fullscreen' ? !!fullscreen : undefined,
103
104
  onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
104
105
  evn.stopPropagation();
105
106
  handleClick(item, item.groupName);