@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.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 (42) hide show
  1. package/README.md +10 -0
  2. package/jest.config.ts +8 -9
  3. package/lib/Editor/Editor.js +18 -13
  4. package/lib/EditorToolbar/FloatingToolbar.js +50 -20
  5. package/lib/EditorToolbar/Toolbar.js +31 -24
  6. package/lib/EditorToolbar/Tools/Bold/BoldButton.js +14 -9
  7. package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +14 -9
  8. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +20 -15
  9. package/lib/EditorToolbar/Tools/Link/LinkButton.js +42 -14
  10. package/lib/EditorToolbar/Tools/Link/LinkModal.js +16 -11
  11. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +13 -8
  12. package/lib/EditorToolbar/Tools/Redo/RedoButton.js +13 -8
  13. package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +13 -8
  14. package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +13 -8
  15. package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +13 -8
  16. package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +13 -8
  17. package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +19 -14
  18. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +19 -14
  19. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +14 -9
  20. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +13 -8
  21. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +24 -19
  22. package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +14 -9
  23. package/lib/EditorToolbar/Tools/Undo/UndoButton.js +13 -8
  24. package/lib/EditorToolbar/index.js +18 -2
  25. package/lib/Extensions/Extensions.js +17 -13
  26. package/lib/Extensions/LinkExtension/LinkExtension.js +14 -10
  27. package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +10 -7
  28. package/lib/FormattedTextEditor.js +7 -2
  29. package/lib/hooks/index.js +17 -1
  30. package/lib/hooks/useExtensionNames.js +9 -5
  31. package/lib/index.js +8 -2
  32. package/lib/ui/Inputs/Select/Select.js +46 -16
  33. package/lib/ui/Inputs/Text/TextInput.js +31 -5
  34. package/lib/ui/Modal/FormModal.js +33 -5
  35. package/lib/ui/Modal/Modal.js +50 -22
  36. package/lib/ui/ToolbarButton/ToolbarButton.js +8 -3
  37. package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +38 -10
  38. package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js +11 -6
  39. package/lib/utils/createToolbarPositioner.js +16 -12
  40. package/lib/utils/getCursorRect.js +5 -1
  41. package/package.json +3 -2
  42. package/tsconfig.json +1 -1
@@ -1,10 +1,15 @@
1
- import React from 'react';
2
- import { useCommands, useChainedCommands } from '@remirror/react';
3
- import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
4
- import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarButton_1 = __importDefault(require("../../../../ui/ToolbarButton/ToolbarButton"));
9
+ const FormatAlignRight_1 = __importDefault(require("@mui/icons-material/FormatAlignRight"));
5
10
  const RightAlignButton = () => {
6
- const { rightAlign } = useCommands();
7
- const chain = useChainedCommands();
11
+ const { rightAlign } = (0, react_2.useCommands)();
12
+ const chain = (0, react_2.useChainedCommands)();
8
13
  const handleSelect = () => {
9
14
  if (rightAlign.enabled()) {
10
15
  chain.rightAlign().focus().run();
@@ -12,6 +17,6 @@ const RightAlignButton = () => {
12
17
  };
13
18
  const active = rightAlign.active?.() || false;
14
19
  const enabled = rightAlign.enabled();
15
- return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignRightIcon, null), label: "Align right" }));
20
+ return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignRight_1.default, null), label: "Align right" }));
16
21
  };
17
- export default RightAlignButton;
22
+ exports.default = RightAlignButton;
@@ -1,16 +1,21 @@
1
- import React from 'react';
2
- import LeftAlignButton from './LeftAlign/LeftAlignButton';
3
- import CenterAlignButton from './CenterAlign/CenterAlignButton';
4
- import RightAlignButton from './RightAlign/RightAlignButton';
5
- import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
6
- import { VerticalDivider } from '@remirror/react-components';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const LeftAlignButton_1 = __importDefault(require("./LeftAlign/LeftAlignButton"));
8
+ const CenterAlignButton_1 = __importDefault(require("./CenterAlign/CenterAlignButton"));
9
+ const RightAlignButton_1 = __importDefault(require("./RightAlign/RightAlignButton"));
10
+ const JustifyAlignButton_1 = __importDefault(require("./JustifyAlign/JustifyAlignButton"));
11
+ const react_components_1 = require("@remirror/react-components");
7
12
  const TextAlignButtons = () => {
8
- return (React.createElement(React.Fragment, null,
9
- React.createElement(VerticalDivider, { className: "editor-divider" }),
10
- React.createElement(LeftAlignButton, null),
11
- React.createElement(CenterAlignButton, null),
12
- React.createElement(RightAlignButton, null),
13
- React.createElement(JustifyAlignButton, null),
14
- React.createElement(VerticalDivider, { className: "editor-divider" })));
13
+ return (react_1.default.createElement(react_1.default.Fragment, null,
14
+ react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" }),
15
+ react_1.default.createElement(LeftAlignButton_1.default, null),
16
+ react_1.default.createElement(CenterAlignButton_1.default, null),
17
+ react_1.default.createElement(RightAlignButton_1.default, null),
18
+ react_1.default.createElement(JustifyAlignButton_1.default, null),
19
+ react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" })));
15
20
  };
16
- export default TextAlignButtons;
21
+ exports.default = TextAlignButtons;
@@ -1,10 +1,15 @@
1
- import React from 'react';
2
- import { useCommands, useChainedCommands, useActive } from '@remirror/react';
3
- import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
4
9
  const HeadingButton = ({ level }) => {
5
- const { toggleHeading } = useCommands();
6
- const chain = useChainedCommands();
7
- const active = useActive();
10
+ const { toggleHeading } = (0, react_2.useCommands)();
11
+ const chain = (0, react_2.useChainedCommands)();
12
+ const active = (0, react_2.useActive)();
8
13
  const enabled = toggleHeading.enabled({ level });
9
14
  const handleSelect = () => {
10
15
  if (toggleHeading.enabled({ level })) {
@@ -14,19 +19,19 @@ const HeadingButton = ({ level }) => {
14
19
  const headingContent = () => {
15
20
  switch (level) {
16
21
  case 1:
17
- return React.createElement("h1", null, "Heading 1");
22
+ return react_1.default.createElement("h1", null, "Heading 1");
18
23
  case 2:
19
- return React.createElement("h2", null, "Heading 2");
24
+ return react_1.default.createElement("h2", null, "Heading 2");
20
25
  case 3:
21
- return React.createElement("h3", null, "Heading 3");
26
+ return react_1.default.createElement("h3", null, "Heading 3");
22
27
  case 4:
23
- return React.createElement("h4", null, "Heading 4");
28
+ return react_1.default.createElement("h4", null, "Heading 4");
24
29
  case 5:
25
- return React.createElement("h5", null, "Heading 5");
30
+ return react_1.default.createElement("h5", null, "Heading 5");
26
31
  case 6:
27
- return React.createElement("h6", null, "Heading 6");
32
+ return react_1.default.createElement("h6", null, "Heading 6");
28
33
  }
29
34
  };
30
- return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
35
+ return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
31
36
  };
32
- export default HeadingButton;
37
+ exports.default = HeadingButton;
@@ -1,16 +1,21 @@
1
- import React from 'react';
2
- import { useCommands, useChainedCommands, useActive } from '@remirror/react';
3
- import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
4
9
  const ParagraphButton = () => {
5
- const { convertParagraph } = useCommands();
6
- const chain = useChainedCommands();
7
- const active = useActive();
10
+ const { convertParagraph } = (0, react_2.useCommands)();
11
+ const chain = (0, react_2.useChainedCommands)();
12
+ const active = (0, react_2.useActive)();
8
13
  const handleSelect = () => {
9
14
  if (convertParagraph.enabled()) {
10
15
  chain.convertParagraph().focus().run();
11
16
  }
12
17
  };
13
- return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
14
- React.createElement("p", null, "Paragraph")));
18
+ return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
19
+ react_1.default.createElement("p", null, "Paragraph")));
15
20
  };
16
- export default ParagraphButton;
21
+ exports.default = ParagraphButton;
@@ -1,16 +1,21 @@
1
- import React from 'react';
2
- import { useCommands, useActive } from '@remirror/react';
3
- import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
4
9
  const PreformattedButton = () => {
5
- const { togglePreformatted } = useCommands();
6
- const active = useActive();
10
+ const { togglePreformatted } = (0, react_2.useCommands)();
11
+ const active = (0, react_2.useActive)();
7
12
  const enabled = togglePreformatted.enabled();
8
13
  const handleSelect = () => {
9
14
  if (togglePreformatted.enabled()) {
10
15
  togglePreformatted();
11
16
  }
12
17
  };
13
- return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
14
- React.createElement("pre", null, "Preformatted")));
18
+ return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
19
+ react_1.default.createElement("pre", null, "Preformatted")));
15
20
  };
16
- export default PreformattedButton;
21
+ exports.default = PreformattedButton;
@@ -1,11 +1,16 @@
1
- import React from 'react';
2
- import HeadingButton from './Heading/HeadingButton';
3
- import ParagraphButton from './Paragraph/ParagraphButton';
4
- import PreformattedButton from './Preformatted/PreformattedButton';
5
- import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
6
- import { useActive, VerticalDivider } from '@remirror/react';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const HeadingButton_1 = __importDefault(require("./Heading/HeadingButton"));
8
+ const ParagraphButton_1 = __importDefault(require("./Paragraph/ParagraphButton"));
9
+ const PreformattedButton_1 = __importDefault(require("./Preformatted/PreformattedButton"));
10
+ const ToolbarDropdown_1 = __importDefault(require("../../../ui/ToolbarDropdown/ToolbarDropdown"));
11
+ const react_2 = require("@remirror/react");
7
12
  const TextTypeDropdown = () => {
8
- const active = useActive();
13
+ const active = (0, react_2.useActive)();
9
14
  const activeLabel = () => {
10
15
  // Determine if preformatted is active
11
16
  if (active.preformatted()) {
@@ -20,16 +25,16 @@ const TextTypeDropdown = () => {
20
25
  // Default to paragraph
21
26
  return 'Paragraph';
22
27
  };
23
- return (React.createElement(React.Fragment, null,
24
- React.createElement(ToolbarDropdown, { label: activeLabel() },
25
- React.createElement(ParagraphButton, null),
26
- React.createElement(HeadingButton, { level: 1 }),
27
- React.createElement(HeadingButton, { level: 2 }),
28
- React.createElement(HeadingButton, { level: 3 }),
29
- React.createElement(HeadingButton, { level: 4 }),
30
- React.createElement(HeadingButton, { level: 5 }),
31
- React.createElement(HeadingButton, { level: 6 }),
32
- React.createElement(PreformattedButton, null)),
33
- React.createElement(VerticalDivider, { className: "editor-divider" })));
28
+ return (react_1.default.createElement(react_1.default.Fragment, null,
29
+ react_1.default.createElement(ToolbarDropdown_1.default, { label: activeLabel() },
30
+ react_1.default.createElement(ParagraphButton_1.default, null),
31
+ react_1.default.createElement(HeadingButton_1.default, { level: 1 }),
32
+ react_1.default.createElement(HeadingButton_1.default, { level: 2 }),
33
+ react_1.default.createElement(HeadingButton_1.default, { level: 3 }),
34
+ react_1.default.createElement(HeadingButton_1.default, { level: 4 }),
35
+ react_1.default.createElement(HeadingButton_1.default, { level: 5 }),
36
+ react_1.default.createElement(HeadingButton_1.default, { level: 6 }),
37
+ react_1.default.createElement(PreformattedButton_1.default, null)),
38
+ react_1.default.createElement(react_2.VerticalDivider, { className: "editor-divider" })));
34
39
  };
35
- export default TextTypeDropdown;
40
+ exports.default = TextTypeDropdown;
@@ -1,17 +1,22 @@
1
- import React from 'react';
2
- import { useCommands, useActive, useChainedCommands } from '@remirror/react';
3
- import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
4
- import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
9
+ const FormatUnderlinedRounded_1 = __importDefault(require("@mui/icons-material/FormatUnderlinedRounded"));
5
10
  const UnderlineButton = () => {
6
- const { toggleUnderline } = useCommands();
7
- const chain = useChainedCommands();
8
- const active = useActive();
11
+ const { toggleUnderline } = (0, react_2.useCommands)();
12
+ const chain = (0, react_2.useChainedCommands)();
13
+ const active = (0, react_2.useActive)();
9
14
  const enabled = toggleUnderline.enabled();
10
15
  const handleSelect = () => {
11
16
  if (toggleUnderline.enabled()) {
12
17
  chain.toggleUnderline().focus().run();
13
18
  }
14
19
  };
15
- return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: React.createElement(FormatUnderlinedRoundedIcon, null), label: "Underline (cmd+U)" }));
20
+ return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: "Underline (cmd+U)" }));
16
21
  };
17
- export default UnderlineButton;
22
+ exports.default = UnderlineButton;
@@ -1,16 +1,21 @@
1
- import React from 'react';
2
- import { useCommands, useHelpers } from '@remirror/react';
3
- import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
4
- import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const react_2 = require("@remirror/react");
8
+ const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
9
+ const UndoRounded_1 = __importDefault(require("@mui/icons-material/UndoRounded"));
5
10
  const UndoButton = () => {
6
- const { undo } = useCommands();
7
- const { undoDepth } = useHelpers(true);
11
+ const { undo } = (0, react_2.useCommands)();
12
+ const { undoDepth } = (0, react_2.useHelpers)(true);
8
13
  const handleSelect = () => {
9
14
  if (undo.enabled()) {
10
15
  undo();
11
16
  }
12
17
  };
13
18
  const enabled = undoDepth() > 0;
14
- return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(UndoRoundedIcon, null), label: "Undo (cmd+Z)" }));
19
+ return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: "Undo (cmd+Z)" }));
15
20
  };
16
- export default UndoButton;
21
+ exports.default = UndoButton;
@@ -1,2 +1,18 @@
1
- export * from './FloatingToolbar';
2
- export * from './Toolbar';
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./FloatingToolbar"), exports);
18
+ __exportStar(require("./Toolbar"), exports);
@@ -1,16 +1,19 @@
1
- import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, } from 'remirror/extensions';
2
- import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
3
- import { LinkExtension } from './LinkExtension/LinkExtension';
4
- export const Extensions = () => [
5
- new BoldExtension(),
6
- new HeadingExtension(),
7
- new ItalicExtension(),
8
- new NodeFormattingExtension(),
9
- new ParagraphExtension(),
10
- new PreformattedExtension(),
11
- new UnderlineExtension(),
12
- new HistoryExtension(),
13
- new LinkExtension({
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Extensions = void 0;
4
+ const extensions_1 = require("remirror/extensions");
5
+ const PreformattedExtension_1 = require("./PreformattedExtension/PreformattedExtension");
6
+ const LinkExtension_1 = require("./LinkExtension/LinkExtension");
7
+ const Extensions = () => [
8
+ new extensions_1.BoldExtension(),
9
+ new extensions_1.HeadingExtension(),
10
+ new extensions_1.ItalicExtension(),
11
+ new extensions_1.NodeFormattingExtension(),
12
+ new extensions_1.ParagraphExtension(),
13
+ new PreformattedExtension_1.PreformattedExtension(),
14
+ new extensions_1.UnderlineExtension(),
15
+ new extensions_1.HistoryExtension(),
16
+ new LinkExtension_1.LinkExtension({
14
17
  supportedTargets: [
15
18
  // '_self' is the browser default and will be used when encountering a link with a
16
19
  // different target is encountered.
@@ -18,3 +21,4 @@ export const Extensions = () => [
18
21
  ],
19
22
  }),
20
23
  ];
24
+ exports.Extensions = Extensions;
@@ -1,7 +1,10 @@
1
- import { getMarkRanges, isElementDomNode } from 'remirror';
2
- import { getTextSelection, getMarkRange, updateMark, removeMark } from '@remirror/core';
3
- import { LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
4
- export class LinkExtension extends RemirrorLinkExtension {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.LinkExtension = void 0;
4
+ const remirror_1 = require("remirror");
5
+ const core_1 = require("@remirror/core");
6
+ const extensions_1 = require("remirror/extensions");
7
+ class LinkExtension extends extensions_1.LinkExtension {
5
8
  createMarkSpec(extra, override) {
6
9
  const spec = super.createMarkSpec(extra, override);
7
10
  return {
@@ -15,7 +18,7 @@ export class LinkExtension extends RemirrorLinkExtension {
15
18
  {
16
19
  tag: 'a[href]',
17
20
  getAttrs: (node) => {
18
- if (!isElementDomNode(node)) {
21
+ if (!(0, remirror_1.isElementDomNode)(node)) {
19
22
  return false;
20
23
  }
21
24
  return {
@@ -33,7 +36,7 @@ export class LinkExtension extends RemirrorLinkExtension {
33
36
  shortcut({ tr }) {
34
37
  // override parent implementation to allow a link to be inserted without requiring a text selection first.
35
38
  const { from, to, $from } = tr.selection;
36
- const mark = getMarkRange($from, this.type);
39
+ const mark = (0, core_1.getMarkRange)($from, this.type);
37
40
  const selectedText = tr.doc.textBetween(from, to);
38
41
  this.options.onShortcut({
39
42
  activeLink: mark ? { attrs: mark.mark.attrs, from: mark.from, to: mark.to } : undefined,
@@ -48,7 +51,7 @@ export class LinkExtension extends RemirrorLinkExtension {
48
51
  // the select text is widened to include the link but retains non-link selected text as well.
49
52
  return (props) => {
50
53
  const { tr } = props;
51
- const ranges = getMarkRanges(tr.selection, this.type);
54
+ const ranges = (0, remirror_1.getMarkRanges)(tr.selection, this.type);
52
55
  if (ranges.length === 0) {
53
56
  return false;
54
57
  }
@@ -77,15 +80,16 @@ export class LinkExtension extends RemirrorLinkExtension {
77
80
  }
78
81
  // apply the link, or remove it if no URL was provided.
79
82
  if (attrs.href.length > 0) {
80
- updateMark({ type: this.type, attrs, range })(props);
83
+ (0, core_1.updateMark)({ type: this.type, attrs, range })(props);
81
84
  }
82
85
  else {
83
- removeMark({ type: this.type, range })(props);
86
+ (0, core_1.removeMark)({ type: this.type, range })(props);
84
87
  }
85
88
  // move the cursor to the end of the link and re-focus the editor.
86
- dispatch?.(tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc)));
89
+ dispatch?.(tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc)));
87
90
  view?.focus();
88
91
  return true;
89
92
  };
90
93
  }
91
94
  }
95
+ exports.LinkExtension = LinkExtension;
@@ -1,16 +1,19 @@
1
+ "use strict";
1
2
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
3
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
4
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
5
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
6
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
7
  };
7
- import { command, extension, ExtensionTag, NodeExtension, toggleBlockItem, } from '@remirror/core';
8
- let PreformattedExtension = class PreformattedExtension extends NodeExtension {
8
+ Object.defineProperty(exports, "__esModule", { value: true });
9
+ exports.PreformattedExtension = void 0;
10
+ const core_1 = require("@remirror/core");
11
+ let PreformattedExtension = class PreformattedExtension extends core_1.NodeExtension {
9
12
  get name() {
10
13
  return 'preformatted';
11
14
  }
12
15
  createTags() {
13
- return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
16
+ return [core_1.ExtensionTag.Block, core_1.ExtensionTag.TextBlock, core_1.ExtensionTag.FormattingNode];
14
17
  }
15
18
  createNodeSpec(extra, override) {
16
19
  return {
@@ -31,16 +34,16 @@ let PreformattedExtension = class PreformattedExtension extends NodeExtension {
31
34
  * Toggle the <pre> for the current block.
32
35
  */
33
36
  togglePreformatted() {
34
- return toggleBlockItem({
37
+ return (0, core_1.toggleBlockItem)({
35
38
  type: this.type,
36
39
  toggleType: 'paragraph',
37
40
  });
38
41
  }
39
42
  };
40
43
  __decorate([
41
- command()
44
+ (0, core_1.command)()
42
45
  ], PreformattedExtension.prototype, "togglePreformatted", null);
43
46
  PreformattedExtension = __decorate([
44
- extension({})
47
+ (0, core_1.extension)({})
45
48
  ], PreformattedExtension);
46
- export { PreformattedExtension };
49
+ exports.PreformattedExtension = PreformattedExtension;
@@ -1,2 +1,7 @@
1
- import Editor from './Editor/Editor';
2
- export default Editor;
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const Editor_1 = __importDefault(require("./Editor/Editor"));
7
+ exports.default = Editor_1.default;
@@ -1 +1,17 @@
1
- export * from './useExtensionNames';
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useExtensionNames"), exports);
@@ -1,8 +1,11 @@
1
- import { useRemirrorContext } from '@remirror/react';
2
- import { useMemo } from 'react';
3
- export const useExtensionNames = () => {
4
- const { manager } = useRemirrorContext();
5
- return useMemo(() => {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useExtensionNames = void 0;
4
+ const react_1 = require("@remirror/react");
5
+ const react_2 = require("react");
6
+ const useExtensionNames = () => {
7
+ const { manager } = (0, react_1.useRemirrorContext)();
8
+ return (0, react_2.useMemo)(() => {
6
9
  const extensionNames = {};
7
10
  manager.extensions.forEach((extension) => {
8
11
  extensionNames[extension.name] = true;
@@ -10,3 +13,4 @@ export const useExtensionNames = () => {
10
13
  return extensionNames;
11
14
  }, [manager]);
12
15
  };
16
+ exports.useExtensionNames = useExtensionNames;
package/lib/index.js CHANGED
@@ -1,2 +1,8 @@
1
- import FormattedTextEditor from './FormattedTextEditor';
2
- export { FormattedTextEditor };
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.FormattedTextEditor = void 0;
7
+ const FormattedTextEditor_1 = __importDefault(require("./FormattedTextEditor"));
8
+ exports.FormattedTextEditor = FormattedTextEditor_1.default;
@@ -1,23 +1,53 @@
1
- import { Listbox } from '@headlessui/react';
2
- import React, { useState } from 'react';
3
- import clsx from 'clsx';
4
- import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
5
- import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
6
- export const Select = ({ name, label, value, onChange, options }) => {
7
- const [selectedOption, setSelectedOptions] = useState(value ? options[value] : null);
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.Select = void 0;
30
+ const react_1 = require("@headlessui/react");
31
+ const react_2 = __importStar(require("react"));
32
+ const clsx_1 = __importDefault(require("clsx"));
33
+ const ExpandMoreRounded_1 = __importDefault(require("@mui/icons-material/ExpandMoreRounded"));
34
+ const ExpandLessRounded_1 = __importDefault(require("@mui/icons-material/ExpandLessRounded"));
35
+ const Select = ({ name, label, value, onChange, options }) => {
36
+ const [selectedOption, setSelectedOptions] = (0, react_2.useState)(value ? options[value] : null);
8
37
  const handleChange = (value) => {
9
38
  setSelectedOptions(options[value]);
10
39
  onChange?.(value);
11
40
  };
12
- return (React.createElement(Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (React.createElement(React.Fragment, null,
13
- label && React.createElement(Listbox.Label, { className: "squiz-fte-form-label" }, label),
14
- React.createElement("div", { className: "relative text-md text-gray-800" },
15
- React.createElement(Listbox.Button, { className: "w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
16
- React.createElement("span", { className: "flex items-center" },
17
- React.createElement("span", { className: "block truncate" },
41
+ return (react_2.default.createElement(react_1.Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
42
+ label && react_2.default.createElement(react_1.Listbox.Label, { className: "squiz-fte-form-label" }, label),
43
+ react_2.default.createElement("div", { className: "relative text-md text-gray-800" },
44
+ react_2.default.createElement(react_1.Listbox.Button, { className: "w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
45
+ react_2.default.createElement("span", { className: "flex items-center" },
46
+ react_2.default.createElement("span", { className: "block truncate" },
18
47
  selectedOption?.label,
19
48
  "\u00A0")),
20
- React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (React.createElement(ExpandMoreRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })) : (React.createElement(ExpandLessRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })))),
21
- React.createElement(Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, Object.entries(options).map(([key, option]) => (React.createElement(Listbox.Option, { key: key, value: key, className: ({ active }) => clsx(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
22
- React.createElement("span", { className: "block truncate" }, option.label))))))))));
49
+ react_2.default.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (react_2.default.createElement(ExpandMoreRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })) : (react_2.default.createElement(ExpandLessRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })))),
50
+ react_2.default.createElement(react_1.Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, Object.entries(options).map(([key, option]) => (react_2.default.createElement(react_1.Listbox.Option, { key: key, value: key, className: ({ active }) => (0, clsx_1.default)(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
51
+ react_2.default.createElement("span", { className: "block truncate" }, option.label))))))))));
23
52
  };
53
+ exports.Select = Select;