@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.
- package/README.md +10 -0
- package/jest.config.ts +8 -9
- package/lib/Editor/Editor.js +18 -13
- package/lib/EditorToolbar/FloatingToolbar.js +50 -20
- package/lib/EditorToolbar/Toolbar.js +31 -24
- package/lib/EditorToolbar/Tools/Bold/BoldButton.js +14 -9
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +14 -9
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +20 -15
- package/lib/EditorToolbar/Tools/Link/LinkButton.js +42 -14
- package/lib/EditorToolbar/Tools/Link/LinkModal.js +16 -11
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +13 -8
- package/lib/EditorToolbar/Tools/Redo/RedoButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +19 -14
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +19 -14
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +14 -9
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +13 -8
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +24 -19
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +14 -9
- package/lib/EditorToolbar/Tools/Undo/UndoButton.js +13 -8
- package/lib/EditorToolbar/index.js +18 -2
- package/lib/Extensions/Extensions.js +17 -13
- package/lib/Extensions/LinkExtension/LinkExtension.js +14 -10
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +10 -7
- package/lib/FormattedTextEditor.js +7 -2
- package/lib/hooks/index.js +17 -1
- package/lib/hooks/useExtensionNames.js +9 -5
- package/lib/index.js +8 -2
- package/lib/ui/Inputs/Select/Select.js +46 -16
- package/lib/ui/Inputs/Text/TextInput.js +31 -5
- package/lib/ui/Modal/FormModal.js +33 -5
- package/lib/ui/Modal/Modal.js +50 -22
- package/lib/ui/ToolbarButton/ToolbarButton.js +8 -3
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +38 -10
- package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js +11 -6
- package/lib/utils/createToolbarPositioner.js +16 -12
- package/lib/utils/getCursorRect.js +5 -1
- package/package.json +3 -2
- package/tsconfig.json +1 -1
@@ -1,10 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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 (
|
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
|
-
|
22
|
+
exports.default = RightAlignButton;
|
@@ -1,16 +1,21 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
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 (
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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
|
-
|
21
|
+
exports.default = TextAlignButtons;
|
@@ -1,10 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
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
|
22
|
+
return react_1.default.createElement("h1", null, "Heading 1");
|
18
23
|
case 2:
|
19
|
-
return
|
24
|
+
return react_1.default.createElement("h2", null, "Heading 2");
|
20
25
|
case 3:
|
21
|
-
return
|
26
|
+
return react_1.default.createElement("h3", null, "Heading 3");
|
22
27
|
case 4:
|
23
|
-
return
|
28
|
+
return react_1.default.createElement("h4", null, "Heading 4");
|
24
29
|
case 5:
|
25
|
-
return
|
30
|
+
return react_1.default.createElement("h5", null, "Heading 5");
|
26
31
|
case 6:
|
27
|
-
return
|
32
|
+
return react_1.default.createElement("h6", null, "Heading 6");
|
28
33
|
}
|
29
34
|
};
|
30
|
-
return (
|
35
|
+
return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
|
31
36
|
};
|
32
|
-
|
37
|
+
exports.default = HeadingButton;
|
@@ -1,16 +1,21 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
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 (
|
14
|
-
|
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
|
-
|
21
|
+
exports.default = ParagraphButton;
|
@@ -1,16 +1,21 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
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 (
|
14
|
-
|
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
|
-
|
21
|
+
exports.default = PreformattedButton;
|
@@ -1,11 +1,16 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
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 (
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
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
|
-
|
40
|
+
exports.default = TextTypeDropdown;
|
@@ -1,17 +1,22 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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 (
|
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
|
-
|
22
|
+
exports.default = UnderlineButton;
|
@@ -1,16 +1,21 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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 (
|
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
|
-
|
21
|
+
exports.default = UndoButton;
|
@@ -1,2 +1,18 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
new
|
9
|
-
new
|
10
|
-
new
|
11
|
-
new
|
12
|
-
new
|
13
|
-
new
|
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
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
8
|
-
|
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
|
-
|
49
|
+
exports.PreformattedExtension = PreformattedExtension;
|
@@ -1,2 +1,7 @@
|
|
1
|
-
|
2
|
-
|
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;
|
package/lib/hooks/index.js
CHANGED
@@ -1 +1,17 @@
|
|
1
|
-
|
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
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
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
|
-
|
2
|
-
|
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
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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 (
|
13
|
-
label &&
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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
|
-
|
21
|
-
|
22
|
-
|
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;
|