@os-design/editor 1.0.160 → 1.0.161
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/cjs/Editor/BlockToolbar.js +4 -18
- package/dist/cjs/Editor/BlockToolbar.js.map +1 -1
- package/dist/cjs/Editor/StyleToolbar.js +6 -23
- package/dist/cjs/Editor/StyleToolbar.js.map +1 -1
- package/dist/cjs/Editor/Toolbar.js +0 -7
- package/dist/cjs/Editor/Toolbar.js.map +1 -1
- package/dist/cjs/Editor/ToolbarButton.js +2 -21
- package/dist/cjs/Editor/ToolbarButton.js.map +1 -1
- package/dist/cjs/Editor/blocks/Figure.js +0 -6
- package/dist/cjs/Editor/blocks/Figure.js.map +1 -1
- package/dist/cjs/Editor/blocks/FigureCaption.js +0 -7
- package/dist/cjs/Editor/blocks/FigureCaption.js.map +1 -1
- package/dist/cjs/Editor/blocks/imageBlock.js +12 -62
- package/dist/cjs/Editor/blocks/imageBlock.js.map +1 -1
- package/dist/cjs/Editor/blocks/videoBlock.js +4 -22
- package/dist/cjs/Editor/blocks/videoBlock.js.map +1 -1
- package/dist/cjs/Editor/decorators/linkDecorator.js +3 -9
- package/dist/cjs/Editor/decorators/linkDecorator.js.map +1 -1
- package/dist/cjs/Editor/hooks/useBlockToolbarProps.js +14 -32
- package/dist/cjs/Editor/hooks/useBlockToolbarProps.js.map +1 -1
- package/dist/cjs/Editor/hooks/usePastedTextHandler.js +0 -9
- package/dist/cjs/Editor/hooks/usePastedTextHandler.js.map +1 -1
- package/dist/cjs/Editor/hooks/useReturnHandler.js +0 -8
- package/dist/cjs/Editor/hooks/useReturnHandler.js.map +1 -1
- package/dist/cjs/Editor/hooks/useStyleToolbarProps.js +16 -29
- package/dist/cjs/Editor/hooks/useStyleToolbarProps.js.map +1 -1
- package/dist/cjs/Editor/index.js +41 -76
- package/dist/cjs/Editor/index.js.map +1 -1
- package/dist/cjs/Editor/styles/defaultDraftJsStyles.js +0 -4
- package/dist/cjs/Editor/styles/defaultDraftJsStyles.js.map +1 -1
- package/dist/cjs/Editor/styles/overrideDraftJsStyles.js +0 -6
- package/dist/cjs/Editor/styles/overrideDraftJsStyles.js.map +1 -1
- package/dist/cjs/Editor/utils/addNewBlockAt.js +0 -5
- package/dist/cjs/Editor/utils/addNewBlockAt.js.map +1 -1
- package/dist/cjs/Editor/utils/changeBlock.js +0 -3
- package/dist/cjs/Editor/utils/changeBlock.js.map +1 -1
- package/dist/cjs/Editor/utils/createContentEditorState.js +0 -5
- package/dist/cjs/Editor/utils/createContentEditorState.js.map +1 -1
- package/dist/cjs/Editor/utils/createDecorator.js +0 -5
- package/dist/cjs/Editor/utils/createDecorator.js.map +1 -1
- package/dist/cjs/Editor/utils/createEmptyEditorState.js +0 -5
- package/dist/cjs/Editor/utils/createEmptyEditorState.js.map +1 -1
- package/dist/cjs/Editor/utils/defaultStyleToolbarItems.js +0 -7
- package/dist/cjs/Editor/utils/defaultStyleToolbarItems.js.map +1 -1
- package/dist/cjs/Editor/utils/getCurrentBlock.js +0 -2
- package/dist/cjs/Editor/utils/getCurrentBlock.js.map +1 -1
- package/dist/cjs/Editor/utils/getSelectedBlockElement.js +0 -6
- package/dist/cjs/Editor/utils/getSelectedBlockElement.js.map +1 -1
- package/dist/cjs/Editor/utils/getSelectionRange.js +0 -2
- package/dist/cjs/Editor/utils/getSelectionRange.js.map +1 -1
- package/dist/cjs/Editor/utils/setLink.js +0 -6
- package/dist/cjs/Editor/utils/setLink.js.map +1 -1
- package/dist/cjs/Editor/utils/transformers.js +0 -4
- package/dist/cjs/Editor/utils/transformers.js.map +1 -1
- package/dist/cjs/Editor/utils/unsetLink.js +0 -4
- package/dist/cjs/Editor/utils/unsetLink.js.map +1 -1
- package/dist/cjs/EditorSkeleton/index.js +1 -12
- package/dist/cjs/EditorSkeleton/index.js.map +1 -1
- package/dist/cjs/index.js +0 -21
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Editor/BlockToolbar.js +0 -2
- package/dist/esm/Editor/BlockToolbar.js.map +1 -1
- package/dist/esm/Editor/StyleToolbar.js +2 -5
- package/dist/esm/Editor/StyleToolbar.js.map +1 -1
- package/dist/esm/Editor/Toolbar.js.map +1 -1
- package/dist/esm/Editor/ToolbarButton.js +0 -5
- package/dist/esm/Editor/ToolbarButton.js.map +1 -1
- package/dist/esm/Editor/blocks/Figure.js.map +1 -1
- package/dist/esm/Editor/blocks/FigureCaption.js.map +1 -1
- package/dist/esm/Editor/blocks/imageBlock.js +9 -15
- package/dist/esm/Editor/blocks/imageBlock.js.map +1 -1
- package/dist/esm/Editor/blocks/videoBlock.js +0 -5
- package/dist/esm/Editor/blocks/videoBlock.js.map +1 -1
- package/dist/esm/Editor/decorators/linkDecorator.js.map +1 -1
- package/dist/esm/Editor/hooks/useBlockToolbarProps.js +0 -6
- package/dist/esm/Editor/hooks/useBlockToolbarProps.js.map +1 -1
- package/dist/esm/Editor/hooks/usePastedTextHandler.js +0 -4
- package/dist/esm/Editor/hooks/usePastedTextHandler.js.map +1 -1
- package/dist/esm/Editor/hooks/useReturnHandler.js +0 -4
- package/dist/esm/Editor/hooks/useReturnHandler.js.map +1 -1
- package/dist/esm/Editor/hooks/useStyleToolbarProps.js +5 -6
- package/dist/esm/Editor/hooks/useStyleToolbarProps.js.map +1 -1
- package/dist/esm/Editor/index.js +10 -10
- package/dist/esm/Editor/index.js.map +1 -1
- package/dist/esm/Editor/styles/defaultDraftJsStyles.js +1 -1
- package/dist/esm/Editor/styles/defaultDraftJsStyles.js.map +1 -1
- package/dist/esm/Editor/styles/overrideDraftJsStyles.js +2 -2
- package/dist/esm/Editor/styles/overrideDraftJsStyles.js.map +1 -1
- package/dist/esm/Editor/utils/addNewBlockAt.js +0 -2
- package/dist/esm/Editor/utils/addNewBlockAt.js.map +1 -1
- package/dist/esm/Editor/utils/changeBlock.js +0 -2
- package/dist/esm/Editor/utils/changeBlock.js.map +1 -1
- package/dist/esm/Editor/utils/createContentEditorState.js +0 -2
- package/dist/esm/Editor/utils/createContentEditorState.js.map +1 -1
- package/dist/esm/Editor/utils/createDecorator.js +0 -2
- package/dist/esm/Editor/utils/createDecorator.js.map +1 -1
- package/dist/esm/Editor/utils/createEmptyEditorState.js +0 -2
- package/dist/esm/Editor/utils/createEmptyEditorState.js.map +1 -1
- package/dist/esm/Editor/utils/defaultStyleToolbarItems.js.map +1 -1
- package/dist/esm/Editor/utils/getCurrentBlock.js +0 -1
- package/dist/esm/Editor/utils/getCurrentBlock.js.map +1 -1
- package/dist/esm/Editor/utils/getSelectedBlockElement.js +0 -4
- package/dist/esm/Editor/utils/getSelectedBlockElement.js.map +1 -1
- package/dist/esm/Editor/utils/getSelectionRange.js +0 -1
- package/dist/esm/Editor/utils/getSelectionRange.js.map +1 -1
- package/dist/esm/Editor/utils/setLink.js +0 -2
- package/dist/esm/Editor/utils/setLink.js.map +1 -1
- package/dist/esm/Editor/utils/transformers.js.map +1 -1
- package/dist/esm/Editor/utils/unsetLink.js +0 -2
- package/dist/esm/Editor/utils/unsetLink.js.map +1 -1
- package/dist/esm/EditorSkeleton/index.js +1 -2
- package/dist/esm/EditorSkeleton/index.js.map +1 -1
- package/dist/esm/emotion.d.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSelectionRange.js","names":["getSelectionRange","selection","document","getSelection","rangeCount","getRangeAt"],"sources":["../../../../src/Editor/utils/getSelectionRange.ts"],"sourcesContent":["const getSelectionRange = (): Range | null => {\n const selection = document.getSelection();\n if (!selection || selection.rangeCount === 0) return null;\n return selection.getRangeAt(0);\n};\n\nexport default getSelectionRange;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"getSelectionRange.js","names":["getSelectionRange","selection","document","getSelection","rangeCount","getRangeAt"],"sources":["../../../../src/Editor/utils/getSelectionRange.ts"],"sourcesContent":["const getSelectionRange = (): Range | null => {\n const selection = document.getSelection();\n if (!selection || selection.rangeCount === 0) return null;\n return selection.getRangeAt(0);\n};\n\nexport default getSelectionRange;\n"],"mappings":";;;;;;AAAA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,GAAuB;EAC5C,IAAMC,SAAS,GAAGC,QAAQ,CAACC,YAAY,EAAE;EACzC,IAAI,CAACF,SAAS,IAAIA,SAAS,CAACG,UAAU,KAAK,CAAC,EAAE,OAAO,IAAI;EACzD,OAAOH,SAAS,CAACI,UAAU,CAAC,CAAC,CAAC;AAChC,CAAC;AAAC,eAEaL,iBAAiB;AAAA"}
|
|
@@ -4,26 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _draftJs = require("draft-js");
|
|
9
|
-
|
|
10
8
|
var setLink = function setLink(editorState, url) {
|
|
11
9
|
var containsLink = _draftJs.RichUtils.currentBlockContainsLink(editorState);
|
|
12
|
-
|
|
13
10
|
if (containsLink) return editorState;
|
|
14
11
|
var contentState = editorState.getCurrentContent();
|
|
15
12
|
var contentStateWithLink = contentState.createEntity('LINK', 'MUTABLE', {
|
|
16
13
|
url: url
|
|
17
14
|
});
|
|
18
15
|
var entityKey = contentStateWithLink.getLastCreatedEntityKey();
|
|
19
|
-
|
|
20
16
|
var nextEditorState = _draftJs.EditorState.set(editorState, {
|
|
21
17
|
currentContent: contentStateWithLink
|
|
22
18
|
});
|
|
23
|
-
|
|
24
19
|
return _draftJs.RichUtils.toggleLink(nextEditorState, nextEditorState.getSelection(), entityKey);
|
|
25
20
|
};
|
|
26
|
-
|
|
27
21
|
var _default = setLink;
|
|
28
22
|
exports["default"] = _default;
|
|
29
23
|
//# sourceMappingURL=setLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"setLink.js","names":["setLink","editorState","url","containsLink","RichUtils","currentBlockContainsLink","contentState","getCurrentContent","contentStateWithLink","createEntity","entityKey","getLastCreatedEntityKey","nextEditorState","EditorState","set","currentContent","toggleLink","getSelection"],"sources":["../../../../src/Editor/utils/setLink.ts"],"sourcesContent":["import { EditorState, RichUtils } from 'draft-js';\n\nconst setLink = (editorState: EditorState, url: string): EditorState => {\n const containsLink = RichUtils.currentBlockContainsLink(editorState);\n if (containsLink) return editorState;\n\n const contentState = editorState.getCurrentContent();\n const contentStateWithLink = contentState.createEntity('LINK', 'MUTABLE', {\n url,\n });\n const entityKey = contentStateWithLink.getLastCreatedEntityKey();\n const nextEditorState = EditorState.set(editorState, {\n currentContent: contentStateWithLink,\n });\n return RichUtils.toggleLink(\n nextEditorState,\n nextEditorState.getSelection(),\n entityKey\n );\n};\n\nexport default setLink;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"setLink.js","names":["setLink","editorState","url","containsLink","RichUtils","currentBlockContainsLink","contentState","getCurrentContent","contentStateWithLink","createEntity","entityKey","getLastCreatedEntityKey","nextEditorState","EditorState","set","currentContent","toggleLink","getSelection"],"sources":["../../../../src/Editor/utils/setLink.ts"],"sourcesContent":["import { EditorState, RichUtils } from 'draft-js';\n\nconst setLink = (editorState: EditorState, url: string): EditorState => {\n const containsLink = RichUtils.currentBlockContainsLink(editorState);\n if (containsLink) return editorState;\n\n const contentState = editorState.getCurrentContent();\n const contentStateWithLink = contentState.createEntity('LINK', 'MUTABLE', {\n url,\n });\n const entityKey = contentStateWithLink.getLastCreatedEntityKey();\n const nextEditorState = EditorState.set(editorState, {\n currentContent: contentStateWithLink,\n });\n return RichUtils.toggleLink(\n nextEditorState,\n nextEditorState.getSelection(),\n entityKey\n );\n};\n\nexport default setLink;\n"],"mappings":";;;;;;AAAA;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,WAAwB,EAAEC,GAAW,EAAkB;EACtE,IAAMC,YAAY,GAAGC,kBAAS,CAACC,wBAAwB,CAACJ,WAAW,CAAC;EACpE,IAAIE,YAAY,EAAE,OAAOF,WAAW;EAEpC,IAAMK,YAAY,GAAGL,WAAW,CAACM,iBAAiB,EAAE;EACpD,IAAMC,oBAAoB,GAAGF,YAAY,CAACG,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE;IACxEP,GAAG,EAAHA;EACF,CAAC,CAAC;EACF,IAAMQ,SAAS,GAAGF,oBAAoB,CAACG,uBAAuB,EAAE;EAChE,IAAMC,eAAe,GAAGC,oBAAW,CAACC,GAAG,CAACb,WAAW,EAAE;IACnDc,cAAc,EAAEP;EAClB,CAAC,CAAC;EACF,OAAOJ,kBAAS,CAACY,UAAU,CACzBJ,eAAe,EACfA,eAAe,CAACK,YAAY,EAAE,EAC9BP,SAAS,CACV;AACH,CAAC;AAAC,eAEaV,OAAO;AAAA"}
|
|
@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.editorStateToMetaDescription = exports.editorStateToFirstParagraph = void 0;
|
|
7
|
-
|
|
8
7
|
var editorStateToFirstParagraph = function editorStateToFirstParagraph(editorState) {
|
|
9
8
|
var firstUnstyledBlock = editorState.getCurrentContent().getBlocksAsArray().find(function (block) {
|
|
10
9
|
return block.getType() === 'unstyled';
|
|
11
10
|
});
|
|
12
11
|
return firstUnstyledBlock ? firstUnstyledBlock.getText() : '';
|
|
13
12
|
};
|
|
14
|
-
|
|
15
13
|
exports.editorStateToFirstParagraph = editorStateToFirstParagraph;
|
|
16
|
-
|
|
17
14
|
var editorStateToMetaDescription = function editorStateToMetaDescription(editorState) {
|
|
18
15
|
return editorStateToFirstParagraph(editorState).slice(0, 200).replace(/^(.*[.?!])(.*)/, '$1').trim();
|
|
19
16
|
};
|
|
20
|
-
|
|
21
17
|
exports.editorStateToMetaDescription = editorStateToMetaDescription;
|
|
22
18
|
//# sourceMappingURL=transformers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transformers.js","names":["editorStateToFirstParagraph","editorState","firstUnstyledBlock","getCurrentContent","getBlocksAsArray","find","block","getType","getText","editorStateToMetaDescription","slice","replace","trim"],"sources":["../../../../src/Editor/utils/transformers.ts"],"sourcesContent":["import { EditorState } from 'draft-js';\n\nexport const editorStateToFirstParagraph = (\n editorState: EditorState\n): string => {\n const firstUnstyledBlock = editorState\n .getCurrentContent()\n .getBlocksAsArray()\n .find((block) => block.getType() === 'unstyled');\n\n return firstUnstyledBlock ? firstUnstyledBlock.getText() : '';\n};\n\nexport const editorStateToMetaDescription = (\n editorState: EditorState\n): string =>\n editorStateToFirstParagraph(editorState)\n .slice(0, 200)\n .replace(/^(.*[.?!])(.*)/, '$1')\n .trim();\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"transformers.js","names":["editorStateToFirstParagraph","editorState","firstUnstyledBlock","getCurrentContent","getBlocksAsArray","find","block","getType","getText","editorStateToMetaDescription","slice","replace","trim"],"sources":["../../../../src/Editor/utils/transformers.ts"],"sourcesContent":["import { EditorState } from 'draft-js';\n\nexport const editorStateToFirstParagraph = (\n editorState: EditorState\n): string => {\n const firstUnstyledBlock = editorState\n .getCurrentContent()\n .getBlocksAsArray()\n .find((block) => block.getType() === 'unstyled');\n\n return firstUnstyledBlock ? firstUnstyledBlock.getText() : '';\n};\n\nexport const editorStateToMetaDescription = (\n editorState: EditorState\n): string =>\n editorStateToFirstParagraph(editorState)\n .slice(0, 200)\n .replace(/^(.*[.?!])(.*)/, '$1')\n .trim();\n"],"mappings":";;;;;;AAEO,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2B,CACtCC,WAAwB,EACb;EACX,IAAMC,kBAAkB,GAAGD,WAAW,CACnCE,iBAAiB,EAAE,CACnBC,gBAAgB,EAAE,CAClBC,IAAI,CAAC,UAACC,KAAK;IAAA,OAAKA,KAAK,CAACC,OAAO,EAAE,KAAK,UAAU;EAAA,EAAC;EAElD,OAAOL,kBAAkB,GAAGA,kBAAkB,CAACM,OAAO,EAAE,GAAG,EAAE;AAC/D,CAAC;AAAC;AAEK,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4B,CACvCR,WAAwB;EAAA,OAExBD,2BAA2B,CAACC,WAAW,CAAC,CACrCS,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CACbC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAC/BC,IAAI,EAAE;AAAA;AAAC"}
|
|
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _draftJs = require("draft-js");
|
|
9
|
-
|
|
10
8
|
var unsetLink = function unsetLink(editorState) {
|
|
11
9
|
var containsLink = _draftJs.RichUtils.currentBlockContainsLink(editorState);
|
|
12
|
-
|
|
13
10
|
if (!containsLink) return editorState;
|
|
14
11
|
var selectionState = editorState.getSelection();
|
|
15
12
|
return _draftJs.RichUtils.toggleLink(editorState, selectionState, null);
|
|
16
13
|
};
|
|
17
|
-
|
|
18
14
|
var _default = unsetLink;
|
|
19
15
|
exports["default"] = _default;
|
|
20
16
|
//# sourceMappingURL=unsetLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"unsetLink.js","names":["unsetLink","editorState","containsLink","RichUtils","currentBlockContainsLink","selectionState","getSelection","toggleLink"],"sources":["../../../../src/Editor/utils/unsetLink.ts"],"sourcesContent":["import { EditorState, RichUtils } from 'draft-js';\n\nconst unsetLink = (editorState: EditorState): EditorState => {\n const containsLink = RichUtils.currentBlockContainsLink(editorState);\n if (!containsLink) return editorState;\n\n const selectionState = editorState.getSelection();\n return RichUtils.toggleLink(editorState, selectionState, null);\n};\n\nexport default unsetLink;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"unsetLink.js","names":["unsetLink","editorState","containsLink","RichUtils","currentBlockContainsLink","selectionState","getSelection","toggleLink"],"sources":["../../../../src/Editor/utils/unsetLink.ts"],"sourcesContent":["import { EditorState, RichUtils } from 'draft-js';\n\nconst unsetLink = (editorState: EditorState): EditorState => {\n const containsLink = RichUtils.currentBlockContainsLink(editorState);\n if (!containsLink) return editorState;\n\n const selectionState = editorState.getSelection();\n return RichUtils.toggleLink(editorState, selectionState, null);\n};\n\nexport default unsetLink;\n"],"mappings":";;;;;;AAAA;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,WAAwB,EAAkB;EAC3D,IAAMC,YAAY,GAAGC,kBAAS,CAACC,wBAAwB,CAACH,WAAW,CAAC;EACpE,IAAI,CAACC,YAAY,EAAE,OAAOD,WAAW;EAErC,IAAMI,cAAc,GAAGJ,WAAW,CAACK,YAAY,EAAE;EACjD,OAAOH,kBAAS,CAACI,UAAU,CAACN,WAAW,EAAEI,cAAc,EAAE,IAAI,CAAC;AAChE,CAAC;AAAC,eAEaL,SAAS;AAAA"}
|
|
@@ -1,37 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _core = require("@os-design/core");
|
|
15
|
-
|
|
16
11
|
var _templateObject;
|
|
17
|
-
|
|
18
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
-
|
|
20
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
15
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
-
|
|
26
16
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
27
|
-
|
|
28
17
|
var StyledEditorSkeleton = (0, _styled["default"])(_core.InputSkeleton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "em;\n"])), function (p) {
|
|
29
18
|
return p.theme.editorMinHeight;
|
|
30
19
|
});
|
|
20
|
+
|
|
31
21
|
/**
|
|
32
22
|
* Provides an editor placeholder while a user waits for the content to load.
|
|
33
23
|
*/
|
|
34
|
-
|
|
35
24
|
var EditorSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
36
25
|
return /*#__PURE__*/_react["default"].createElement(StyledEditorSkeleton, _extends({}, props, {
|
|
37
26
|
ref: ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["StyledEditorSkeleton","styled","InputSkeleton","p","theme","editorMinHeight","EditorSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/EditorSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { InputSkeleton, InputSkeletonProps } from '@os-design/core';\n\nexport type EditorSkeletonProps = InputSkeletonProps;\n\nconst StyledEditorSkeleton = styled(InputSkeleton)`\n height: ${(p) => p.theme.editorMinHeight}em;\n`;\n\n/**\n * Provides an editor placeholder while a user waits for the content to load.\n */\nconst EditorSkeleton = forwardRef<HTMLDivElement, EditorSkeletonProps>(\n (props, ref) => <StyledEditorSkeleton {...props} ref={ref} />\n);\n\nEditorSkeleton.displayName = 'EditorSkeleton';\n\nexport default EditorSkeleton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["StyledEditorSkeleton","styled","InputSkeleton","p","theme","editorMinHeight","EditorSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/EditorSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { InputSkeleton, InputSkeletonProps } from '@os-design/core';\n\nexport type EditorSkeletonProps = InputSkeletonProps;\n\nconst StyledEditorSkeleton = styled(InputSkeleton)`\n height: ${(p) => p.theme.editorMinHeight}em;\n`;\n\n/**\n * Provides an editor placeholder while a user waits for the content to load.\n */\nconst EditorSkeleton = forwardRef<HTMLDivElement, EditorSkeletonProps>(\n (props, ref) => <StyledEditorSkeleton {...props} ref={ref} />\n);\n\nEditorSkeleton.displayName = 'EditorSkeleton';\n\nexport default EditorSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAIpE,IAAMA,oBAAoB,GAAG,IAAAC,kBAAM,EAACC,mBAAa,CAAC,2FACtC,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,eAAe;AAAA,EACzC;;AAED;AACA;AACA;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAK,gCAAC,oBAAoB,eAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,EAC9D;AAEDH,cAAc,CAACI,WAAW,GAAG,gBAAgB;AAAC,eAE/BJ,cAAc;AAAA"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -84,9 +83,7 @@ Object.defineProperty(exports, "videoBlock", {
|
|
|
84
83
|
return _videoBlock["default"];
|
|
85
84
|
}
|
|
86
85
|
});
|
|
87
|
-
|
|
88
86
|
var _Editor = _interopRequireWildcard(require("./Editor"));
|
|
89
|
-
|
|
90
87
|
Object.keys(_Editor).forEach(function (key) {
|
|
91
88
|
if (key === "default" || key === "__esModule") return;
|
|
92
89
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -98,27 +95,16 @@ Object.keys(_Editor).forEach(function (key) {
|
|
|
98
95
|
}
|
|
99
96
|
});
|
|
100
97
|
});
|
|
101
|
-
|
|
102
98
|
var _addNewBlockAt = _interopRequireDefault(require("./Editor/utils/addNewBlockAt"));
|
|
103
|
-
|
|
104
99
|
var _changeBlock = _interopRequireDefault(require("./Editor/utils/changeBlock"));
|
|
105
|
-
|
|
106
100
|
var _createContentEditorState = _interopRequireDefault(require("./Editor/utils/createContentEditorState"));
|
|
107
|
-
|
|
108
101
|
var _createDecorator = _interopRequireDefault(require("./Editor/utils/createDecorator"));
|
|
109
|
-
|
|
110
102
|
var _createEmptyEditorState = _interopRequireDefault(require("./Editor/utils/createEmptyEditorState"));
|
|
111
|
-
|
|
112
103
|
var _defaultStyleToolbarItems = _interopRequireDefault(require("./Editor/utils/defaultStyleToolbarItems"));
|
|
113
|
-
|
|
114
104
|
var _getCurrentBlock = _interopRequireDefault(require("./Editor/utils/getCurrentBlock"));
|
|
115
|
-
|
|
116
105
|
var _imageBlock = _interopRequireDefault(require("./Editor/blocks/imageBlock"));
|
|
117
|
-
|
|
118
106
|
var _videoBlock = _interopRequireDefault(require("./Editor/blocks/videoBlock"));
|
|
119
|
-
|
|
120
107
|
var _EditorSkeleton = _interopRequireWildcard(require("./EditorSkeleton"));
|
|
121
|
-
|
|
122
108
|
Object.keys(_EditorSkeleton).forEach(function (key) {
|
|
123
109
|
if (key === "default" || key === "__esModule") return;
|
|
124
110
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -130,9 +116,7 @@ Object.keys(_EditorSkeleton).forEach(function (key) {
|
|
|
130
116
|
}
|
|
131
117
|
});
|
|
132
118
|
});
|
|
133
|
-
|
|
134
119
|
var _transformers = require("./Editor/utils/transformers");
|
|
135
|
-
|
|
136
120
|
Object.keys(_transformers).forEach(function (key) {
|
|
137
121
|
if (key === "default" || key === "__esModule") return;
|
|
138
122
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -144,9 +128,7 @@ Object.keys(_transformers).forEach(function (key) {
|
|
|
144
128
|
}
|
|
145
129
|
});
|
|
146
130
|
});
|
|
147
|
-
|
|
148
131
|
var _types = require("./Editor/blocks/types");
|
|
149
|
-
|
|
150
132
|
Object.keys(_types).forEach(function (key) {
|
|
151
133
|
if (key === "default" || key === "__esModule") return;
|
|
152
134
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -158,10 +140,7 @@ Object.keys(_types).forEach(function (key) {
|
|
|
158
140
|
}
|
|
159
141
|
});
|
|
160
142
|
});
|
|
161
|
-
|
|
162
143
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
163
|
-
|
|
164
144
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
165
|
-
|
|
166
145
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
167
146
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Editor } from './Editor';\nexport { default as addNewBlockAt } from './Editor/utils/addNewBlockAt';\nexport { default as changeBlock } from './Editor/utils/changeBlock';\nexport { default as createContentEditorState } from './Editor/utils/createContentEditorState';\nexport { default as createDecorator } from './Editor/utils/createDecorator';\nexport { default as createEmptyEditorState } from './Editor/utils/createEmptyEditorState';\nexport { default as defaultStyleToolbarItems } from './Editor/utils/defaultStyleToolbarItems';\nexport { default as getCurrentBlock } from './Editor/utils/getCurrentBlock';\nexport { default as imageBlock } from './Editor/blocks/imageBlock';\nexport { default as videoBlock } from './Editor/blocks/videoBlock';\nexport { default as EditorSkeleton } from './EditorSkeleton';\n\nexport * from './Editor';\nexport * from './Editor/utils/transformers';\nexport * from './Editor/blocks/types';\nexport * from './EditorSkeleton';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Editor } from './Editor';\nexport { default as addNewBlockAt } from './Editor/utils/addNewBlockAt';\nexport { default as changeBlock } from './Editor/utils/changeBlock';\nexport { default as createContentEditorState } from './Editor/utils/createContentEditorState';\nexport { default as createDecorator } from './Editor/utils/createDecorator';\nexport { default as createEmptyEditorState } from './Editor/utils/createEmptyEditorState';\nexport { default as defaultStyleToolbarItems } from './Editor/utils/defaultStyleToolbarItems';\nexport { default as getCurrentBlock } from './Editor/utils/getCurrentBlock';\nexport { default as imageBlock } from './Editor/blocks/imageBlock';\nexport { default as videoBlock } from './Editor/blocks/videoBlock';\nexport { default as EditorSkeleton } from './EditorSkeleton';\n\nexport * from './Editor';\nexport * from './Editor/utils/transformers';\nexport * from './Editor/blocks/types';\nexport * from './EditorSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAYA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAKA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAFA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAsC;AAAA;AAAA"}
|
|
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
|
|
|
2
2
|
import Toolbar from './Toolbar';
|
|
3
3
|
import ToolbarButton from './ToolbarButton';
|
|
4
4
|
import getCurrentBlock from './utils/getCurrentBlock';
|
|
5
|
-
|
|
6
5
|
const BlockToolbar = ({
|
|
7
6
|
items,
|
|
8
7
|
value,
|
|
@@ -26,6 +25,5 @@ const BlockToolbar = ({
|
|
|
26
25
|
onClick: () => clickHandler(item)
|
|
27
26
|
}, item.icon)));
|
|
28
27
|
};
|
|
29
|
-
|
|
30
28
|
export default BlockToolbar;
|
|
31
29
|
//# sourceMappingURL=BlockToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockToolbar.js","names":["React","useCallback","Toolbar","ToolbarButton","getCurrentBlock","BlockToolbar","items","value","onChange","setReadOnly","rest","clickHandler","onClick","currentBlock","getType","getLength","map","item","type","icon"],"sources":["../../../src/Editor/BlockToolbar.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { EditorState } from 'draft-js';\nimport { PopoverProps } from '@os-design/core';\nimport Toolbar from './Toolbar';\nimport ToolbarButton from './ToolbarButton';\nimport { BlockToolbarItem } from './blocks/types';\nimport getCurrentBlock from './utils/getCurrentBlock';\n\ninterface BlockToolbarProps extends Omit<PopoverProps, 'onChange'> {\n items: BlockToolbarItem[];\n value: EditorState;\n onChange: (value: EditorState) => void;\n setReadOnly: (readOnly: boolean) => void;\n}\n\nconst BlockToolbar: React.FC<BlockToolbarProps> = ({\n items,\n value,\n onChange,\n setReadOnly,\n ...rest\n}) => {\n const clickHandler = useCallback<(item: BlockToolbarItem) => void>(\n ({ onClick }) => {\n const currentBlock = getCurrentBlock(value);\n if (currentBlock.getType() !== 'unstyled' || currentBlock.getLength() > 0)\n return;\n onClick({\n value,\n onChange,\n setReadOnly,\n });\n },\n [value, onChange, setReadOnly]\n );\n\n return (\n <Toolbar {...rest}>\n {items.map((item) => (\n <ToolbarButton key={item.type} onClick={() => clickHandler(item)}>\n {item.icon}\n </ToolbarButton>\n ))}\n </Toolbar>\n );\n};\n\nexport default BlockToolbar;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"BlockToolbar.js","names":["React","useCallback","Toolbar","ToolbarButton","getCurrentBlock","BlockToolbar","items","value","onChange","setReadOnly","rest","clickHandler","onClick","currentBlock","getType","getLength","map","item","type","icon"],"sources":["../../../src/Editor/BlockToolbar.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { EditorState } from 'draft-js';\nimport { PopoverProps } from '@os-design/core';\nimport Toolbar from './Toolbar';\nimport ToolbarButton from './ToolbarButton';\nimport { BlockToolbarItem } from './blocks/types';\nimport getCurrentBlock from './utils/getCurrentBlock';\n\ninterface BlockToolbarProps extends Omit<PopoverProps, 'onChange'> {\n items: BlockToolbarItem[];\n value: EditorState;\n onChange: (value: EditorState) => void;\n setReadOnly: (readOnly: boolean) => void;\n}\n\nconst BlockToolbar: React.FC<BlockToolbarProps> = ({\n items,\n value,\n onChange,\n setReadOnly,\n ...rest\n}) => {\n const clickHandler = useCallback<(item: BlockToolbarItem) => void>(\n ({ onClick }) => {\n const currentBlock = getCurrentBlock(value);\n if (currentBlock.getType() !== 'unstyled' || currentBlock.getLength() > 0)\n return;\n onClick({\n value,\n onChange,\n setReadOnly,\n });\n },\n [value, onChange, setReadOnly]\n );\n\n return (\n <Toolbar {...rest}>\n {items.map((item) => (\n <ToolbarButton key={item.type} onClick={() => clickHandler(item)}>\n {item.icon}\n </ToolbarButton>\n ))}\n </Toolbar>\n );\n};\n\nexport default BlockToolbar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAG1C,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,aAAa,MAAM,iBAAiB;AAE3C,OAAOC,eAAe,MAAM,yBAAyB;AASrD,MAAMC,YAAyC,GAAG,CAAC;EACjDC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACX,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAGV,WAAW,CAC9B,CAAC;IAAEW;EAAQ,CAAC,KAAK;IACf,MAAMC,YAAY,GAAGT,eAAe,CAACG,KAAK,CAAC;IAC3C,IAAIM,YAAY,CAACC,OAAO,EAAE,KAAK,UAAU,IAAID,YAAY,CAACE,SAAS,EAAE,GAAG,CAAC,EACvE;IACFH,OAAO,CAAC;MACNL,KAAK;MACLC,QAAQ;MACRC;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACF,KAAK,EAAEC,QAAQ,EAAEC,WAAW,CAAC,CAC/B;EAED,oBACE,oBAAC,OAAO,EAAKC,IAAI,EACdJ,KAAK,CAACU,GAAG,CAAEC,IAAI,iBACd,oBAAC,aAAa;IAAC,GAAG,EAAEA,IAAI,CAACC,IAAK;IAAC,OAAO,EAAE,MAAMP,YAAY,CAACM,IAAI;EAAE,GAC9DA,IAAI,CAACE,IAAI,CAEb,CAAC,CACM;AAEd,CAAC;AAED,eAAed,YAAY"}
|
|
@@ -4,7 +4,6 @@ import setLink from './utils/setLink';
|
|
|
4
4
|
import unsetLink from './utils/unsetLink';
|
|
5
5
|
import Toolbar from './Toolbar';
|
|
6
6
|
import ToolbarButton from './ToolbarButton';
|
|
7
|
-
|
|
8
7
|
const StyleToolbar = ({
|
|
9
8
|
items,
|
|
10
9
|
value,
|
|
@@ -17,9 +16,8 @@ const StyleToolbar = ({
|
|
|
17
16
|
if (currentBlockContainsLink) {
|
|
18
17
|
onChange(unsetLink(value));
|
|
19
18
|
return;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
}
|
|
20
|
+
// eslint-disable-next-line no-alert
|
|
23
21
|
const url = prompt('Paste or type a link');
|
|
24
22
|
if (!url) return;
|
|
25
23
|
onChange(setLink(value, url));
|
|
@@ -43,7 +41,6 @@ const StyleToolbar = ({
|
|
|
43
41
|
}, item.icon);
|
|
44
42
|
}));
|
|
45
43
|
};
|
|
46
|
-
|
|
47
44
|
StyleToolbar.displayName = 'StyleToolbar';
|
|
48
45
|
export default StyleToolbar;
|
|
49
46
|
//# sourceMappingURL=StyleToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleToolbar.js","names":["React","useCallback","useMemo","RichUtils","setLink","unsetLink","Toolbar","ToolbarButton","StyleToolbar","items","value","onChange","rest","currentBlockType","getCurrentBlockType","currentBlockContainsLink","toggleLink","url","prompt","clickHandler","item","type","toggleInlineStyle","name","toggleBlockType","length","map","isLink","active","getCurrentInlineStyle","has","onClick","icon","displayName"],"sources":["../../../src/Editor/StyleToolbar.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { EditorState, RichUtils } from 'draft-js';\nimport { PopoverProps } from '@os-design/core';\nimport { StyleToolbarItem } from './utils/defaultStyleToolbarItems';\nimport setLink from './utils/setLink';\nimport unsetLink from './utils/unsetLink';\nimport Toolbar from './Toolbar';\nimport ToolbarButton from './ToolbarButton';\n\ninterface StyleToolbarProps extends Omit<PopoverProps, 'onChange'> {\n items: StyleToolbarItem[];\n value: EditorState;\n onChange: (value: EditorState) => void;\n}\n\nconst StyleToolbar: React.FC<StyleToolbarProps> = ({\n items,\n value,\n onChange = () => {},\n ...rest\n}) => {\n const currentBlockType = useMemo(\n () => RichUtils.getCurrentBlockType(value),\n [value]\n );\n const currentBlockContainsLink = useMemo(\n () => RichUtils.currentBlockContainsLink(value),\n [value]\n );\n\n const toggleLink = useCallback(() => {\n if (currentBlockContainsLink) {\n onChange(unsetLink(value));\n return;\n }\n // eslint-disable-next-line no-alert\n const url = prompt('Paste or type a link');\n if (!url) return;\n onChange(setLink(value, url));\n }, [currentBlockContainsLink, value, onChange]);\n\n const clickHandler = useCallback<(item: StyleToolbarItem) => void>(\n (item) => {\n if (item.type === 'inline') {\n onChange(RichUtils.toggleInlineStyle(value, item.name));\n } else if (item.type === 'block') {\n onChange(RichUtils.toggleBlockType(value, item.name));\n }\n },\n [value, onChange]\n );\n\n if (items.length === 0) return null;\n\n return (\n <Toolbar {...rest}>\n {items.map((item) => {\n const isLink = item.name === 'LINK' && item.type === 'inline';\n\n const active = isLink\n ? currentBlockContainsLink\n : value.getCurrentInlineStyle().has(item.name) ||\n currentBlockType === item.name;\n const onClick = isLink ? toggleLink : () => clickHandler(item);\n\n return (\n <ToolbarButton key={item.name} active={active} onClick={onClick}>\n {item.icon}\n </ToolbarButton>\n );\n })}\n </Toolbar>\n );\n};\n\nStyleToolbar.displayName = 'StyleToolbar';\n\nexport default StyleToolbar;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"StyleToolbar.js","names":["React","useCallback","useMemo","RichUtils","setLink","unsetLink","Toolbar","ToolbarButton","StyleToolbar","items","value","onChange","rest","currentBlockType","getCurrentBlockType","currentBlockContainsLink","toggleLink","url","prompt","clickHandler","item","type","toggleInlineStyle","name","toggleBlockType","length","map","isLink","active","getCurrentInlineStyle","has","onClick","icon","displayName"],"sources":["../../../src/Editor/StyleToolbar.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { EditorState, RichUtils } from 'draft-js';\nimport { PopoverProps } from '@os-design/core';\nimport { StyleToolbarItem } from './utils/defaultStyleToolbarItems';\nimport setLink from './utils/setLink';\nimport unsetLink from './utils/unsetLink';\nimport Toolbar from './Toolbar';\nimport ToolbarButton from './ToolbarButton';\n\ninterface StyleToolbarProps extends Omit<PopoverProps, 'onChange'> {\n items: StyleToolbarItem[];\n value: EditorState;\n onChange: (value: EditorState) => void;\n}\n\nconst StyleToolbar: React.FC<StyleToolbarProps> = ({\n items,\n value,\n onChange = () => {},\n ...rest\n}) => {\n const currentBlockType = useMemo(\n () => RichUtils.getCurrentBlockType(value),\n [value]\n );\n const currentBlockContainsLink = useMemo(\n () => RichUtils.currentBlockContainsLink(value),\n [value]\n );\n\n const toggleLink = useCallback(() => {\n if (currentBlockContainsLink) {\n onChange(unsetLink(value));\n return;\n }\n // eslint-disable-next-line no-alert\n const url = prompt('Paste or type a link');\n if (!url) return;\n onChange(setLink(value, url));\n }, [currentBlockContainsLink, value, onChange]);\n\n const clickHandler = useCallback<(item: StyleToolbarItem) => void>(\n (item) => {\n if (item.type === 'inline') {\n onChange(RichUtils.toggleInlineStyle(value, item.name));\n } else if (item.type === 'block') {\n onChange(RichUtils.toggleBlockType(value, item.name));\n }\n },\n [value, onChange]\n );\n\n if (items.length === 0) return null;\n\n return (\n <Toolbar {...rest}>\n {items.map((item) => {\n const isLink = item.name === 'LINK' && item.type === 'inline';\n\n const active = isLink\n ? currentBlockContainsLink\n : value.getCurrentInlineStyle().has(item.name) ||\n currentBlockType === item.name;\n const onClick = isLink ? toggleLink : () => clickHandler(item);\n\n return (\n <ToolbarButton key={item.name} active={active} onClick={onClick}>\n {item.icon}\n </ToolbarButton>\n );\n })}\n </Toolbar>\n );\n};\n\nStyleToolbar.displayName = 'StyleToolbar';\n\nexport default StyleToolbar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAAsBC,SAAS,QAAQ,UAAU;AAGjD,OAAOC,OAAO,MAAM,iBAAiB;AACrC,OAAOC,SAAS,MAAM,mBAAmB;AACzC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,aAAa,MAAM,iBAAiB;AAQ3C,MAAMC,YAAyC,GAAG,CAAC;EACjDC,KAAK;EACLC,KAAK;EACLC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,gBAAgB,GAAGX,OAAO,CAC9B,MAAMC,SAAS,CAACW,mBAAmB,CAACJ,KAAK,CAAC,EAC1C,CAACA,KAAK,CAAC,CACR;EACD,MAAMK,wBAAwB,GAAGb,OAAO,CACtC,MAAMC,SAAS,CAACY,wBAAwB,CAACL,KAAK,CAAC,EAC/C,CAACA,KAAK,CAAC,CACR;EAED,MAAMM,UAAU,GAAGf,WAAW,CAAC,MAAM;IACnC,IAAIc,wBAAwB,EAAE;MAC5BJ,QAAQ,CAACN,SAAS,CAACK,KAAK,CAAC,CAAC;MAC1B;IACF;IACA;IACA,MAAMO,GAAG,GAAGC,MAAM,CAAC,sBAAsB,CAAC;IAC1C,IAAI,CAACD,GAAG,EAAE;IACVN,QAAQ,CAACP,OAAO,CAACM,KAAK,EAAEO,GAAG,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACF,wBAAwB,EAAEL,KAAK,EAAEC,QAAQ,CAAC,CAAC;EAE/C,MAAMQ,YAAY,GAAGlB,WAAW,CAC7BmB,IAAI,IAAK;IACR,IAAIA,IAAI,CAACC,IAAI,KAAK,QAAQ,EAAE;MAC1BV,QAAQ,CAACR,SAAS,CAACmB,iBAAiB,CAACZ,KAAK,EAAEU,IAAI,CAACG,IAAI,CAAC,CAAC;IACzD,CAAC,MAAM,IAAIH,IAAI,CAACC,IAAI,KAAK,OAAO,EAAE;MAChCV,QAAQ,CAACR,SAAS,CAACqB,eAAe,CAACd,KAAK,EAAEU,IAAI,CAACG,IAAI,CAAC,CAAC;IACvD;EACF,CAAC,EACD,CAACb,KAAK,EAAEC,QAAQ,CAAC,CAClB;EAED,IAAIF,KAAK,CAACgB,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAEnC,oBACE,oBAAC,OAAO,EAAKb,IAAI,EACdH,KAAK,CAACiB,GAAG,CAAEN,IAAI,IAAK;IACnB,MAAMO,MAAM,GAAGP,IAAI,CAACG,IAAI,KAAK,MAAM,IAAIH,IAAI,CAACC,IAAI,KAAK,QAAQ;IAE7D,MAAMO,MAAM,GAAGD,MAAM,GACjBZ,wBAAwB,GACxBL,KAAK,CAACmB,qBAAqB,EAAE,CAACC,GAAG,CAACV,IAAI,CAACG,IAAI,CAAC,IAC5CV,gBAAgB,KAAKO,IAAI,CAACG,IAAI;IAClC,MAAMQ,OAAO,GAAGJ,MAAM,GAAGX,UAAU,GAAG,MAAMG,YAAY,CAACC,IAAI,CAAC;IAE9D,oBACE,oBAAC,aAAa;MAAC,GAAG,EAAEA,IAAI,CAACG,IAAK;MAAC,MAAM,EAAEK,MAAO;MAAC,OAAO,EAAEG;IAAQ,GAC7DX,IAAI,CAACY,IAAI,CACI;EAEpB,CAAC,CAAC,CACM;AAEd,CAAC;AAEDxB,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","names":["styled","Popover","clr","Toolbar","p","theme","editorToolbarButtonColorBg","displayName"],"sources":["../../../src/Editor/Toolbar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Popover } from '@os-design/core';\nimport { clr } from '@os-design/theming';\n\nconst Toolbar = styled(Popover)`\n // Reset popover styles\n border: 0;\n\n display: flex;\n flex-direction: row;\n overflow: hidden; // For border-radius\n\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};\n`;\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"Toolbar.js","names":["styled","Popover","clr","Toolbar","p","theme","editorToolbarButtonColorBg","displayName"],"sources":["../../../src/Editor/Toolbar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Popover } from '@os-design/core';\nimport { clr } from '@os-design/theming';\n\nconst Toolbar = styled(Popover)`\n // Reset popover styles\n border: 0;\n\n display: flex;\n flex-direction: row;\n overflow: hidden; // For border-radius\n\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};\n`;\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,iBAAiB;AACzC,SAASC,GAAG,QAAQ,oBAAoB;AAExC,MAAMC,OAAO,GAAGH,MAAM,CAACC,OAAO,CAAE;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,0BAA0B,CAAE;AACrE,CAAC;AAEDH,OAAO,CAACI,WAAW,GAAG,SAAS;AAE/B,eAAeJ,OAAO"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { css } from '@emotion/react';
|
|
5
4
|
import { clr } from '@os-design/theming';
|
|
6
5
|
import styled from '@emotion/styled';
|
|
7
6
|
import { resetButtonStyles, transitionStyles } from '@os-design/styles';
|
|
8
7
|
import { omitEmotionProps } from '@os-design/utils';
|
|
9
|
-
|
|
10
8
|
const activeStyles = p => p.active && css`
|
|
11
9
|
background-color: ${clr(p.theme.editorToolbarButtonColorBgActive)};
|
|
12
10
|
`;
|
|
13
|
-
|
|
14
11
|
const StyledToolbarButton = styled('button', omitEmotionProps('active'))`
|
|
15
12
|
${resetButtonStyles};
|
|
16
13
|
cursor: pointer;
|
|
@@ -35,7 +32,6 @@ const StyledToolbarButton = styled('button', omitEmotionProps('active'))`
|
|
|
35
32
|
${activeStyles};
|
|
36
33
|
${transitionStyles('background-color')};
|
|
37
34
|
`;
|
|
38
|
-
|
|
39
35
|
const ToolbarButton = ({
|
|
40
36
|
onMouseDown = () => {},
|
|
41
37
|
...rest
|
|
@@ -45,7 +41,6 @@ const ToolbarButton = ({
|
|
|
45
41
|
e.preventDefault();
|
|
46
42
|
}
|
|
47
43
|
}, rest));
|
|
48
|
-
|
|
49
44
|
ToolbarButton.displayName = 'ToolbarButton';
|
|
50
45
|
export default ToolbarButton;
|
|
51
46
|
//# sourceMappingURL=ToolbarButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarButton.js","names":["React","css","clr","styled","resetButtonStyles","transitionStyles","omitEmotionProps","activeStyles","p","active","theme","editorToolbarButtonColorBgActive","StyledToolbarButton","editorToolbarButtonSize","editorToolbarButtonColorBg","editorToolbarButtonColorText","editorToolbarButtonColorBgHover","ToolbarButton","onMouseDown","rest","e","preventDefault","displayName"],"sources":["../../../src/Editor/ToolbarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { resetButtonStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\n\ntype JsxButtonProps = JSX.IntrinsicElements['button'];\ninterface ToolbarButtonProps extends JsxButtonProps {\n active?: boolean;\n}\n\nconst activeStyles = (p) =>\n p.active &&\n css`\n background-color: ${clr(p.theme.editorToolbarButtonColorBgActive)};\n `;\n\ntype StyledToolbarButtonProps = Pick<ToolbarButtonProps, 'active'>;\nconst StyledToolbarButton = styled(\n 'button',\n omitEmotionProps('active')\n)<StyledToolbarButtonProps>`\n ${resetButtonStyles};\n cursor: pointer;\n font-size: 1.3em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: ${(p) => p.theme.editorToolbarButtonSize}em;\n height: ${(p) => p.theme.editorToolbarButtonSize}em;\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};\n color: ${(p) => clr(p.theme.editorToolbarButtonColorText)};\n\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBgHover)};\n }\n }\n\n ${activeStyles};\n ${transitionStyles('background-color')};\n`;\n\nconst ToolbarButton: React.FC<ToolbarButtonProps> = ({\n onMouseDown = () => {},\n ...rest\n}) => (\n <StyledToolbarButton\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n />\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nexport default ToolbarButton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarButton.js","names":["React","css","clr","styled","resetButtonStyles","transitionStyles","omitEmotionProps","activeStyles","p","active","theme","editorToolbarButtonColorBgActive","StyledToolbarButton","editorToolbarButtonSize","editorToolbarButtonColorBg","editorToolbarButtonColorText","editorToolbarButtonColorBgHover","ToolbarButton","onMouseDown","rest","e","preventDefault","displayName"],"sources":["../../../src/Editor/ToolbarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { resetButtonStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\n\ntype JsxButtonProps = JSX.IntrinsicElements['button'];\ninterface ToolbarButtonProps extends JsxButtonProps {\n active?: boolean;\n}\n\nconst activeStyles = (p) =>\n p.active &&\n css`\n background-color: ${clr(p.theme.editorToolbarButtonColorBgActive)};\n `;\n\ntype StyledToolbarButtonProps = Pick<ToolbarButtonProps, 'active'>;\nconst StyledToolbarButton = styled(\n 'button',\n omitEmotionProps('active')\n)<StyledToolbarButtonProps>`\n ${resetButtonStyles};\n cursor: pointer;\n font-size: 1.3em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: ${(p) => p.theme.editorToolbarButtonSize}em;\n height: ${(p) => p.theme.editorToolbarButtonSize}em;\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};\n color: ${(p) => clr(p.theme.editorToolbarButtonColorText)};\n\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBgHover)};\n }\n }\n\n ${activeStyles};\n ${transitionStyles('background-color')};\n`;\n\nconst ToolbarButton: React.FC<ToolbarButtonProps> = ({\n onMouseDown = () => {},\n ...rest\n}) => (\n <StyledToolbarButton\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n />\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nexport default ToolbarButton;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAmB;AACvE,SAASC,gBAAgB,QAAQ,kBAAkB;AAOnD,MAAMC,YAAY,GAAIC,CAAC,IACrBA,CAAC,CAACC,MAAM,IACRR,GAAI;AACN,wBAAwBC,GAAG,CAACM,CAAC,CAACE,KAAK,CAACC,gCAAgC,CAAE;AACtE,GAAG;AAGH,MAAMC,mBAAmB,GAAGT,MAAM,CAChC,QAAQ,EACRG,gBAAgB,CAAC,QAAQ,CAAC,CACA;AAC5B,IAAIF,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,uBAAwB;AAClD,YAAaL,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,uBAAwB;AACnD,sBAAuBL,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACI,0BAA0B,CAAE;AACrE,WAAYN,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACK,4BAA4B,CAAE;AAC5D;AACA;AACA;AACA;AACA,0BAA2BP,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACM,+BAA+B,CAAE;AAC9E;AACA;AACA;AACA,IAAIT,YAAa;AACjB,IAAIF,gBAAgB,CAAC,kBAAkB,CAAE;AACzC,CAAC;AAED,MAAMY,aAA2C,GAAG,CAAC;EACnDC,WAAW,GAAG,MAAM,CAAC,CAAC;EACtB,GAAGC;AACL,CAAC,kBACC,oBAAC,mBAAmB;EAClB,WAAW,EAAGC,CAAC,IAAK;IAClBF,WAAW,CAACE,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,EAAE;EACpB;AAAE,GACEF,IAAI,EAEX;AAEDF,aAAa,CAACK,WAAW,GAAG,eAAe;AAE3C,eAAeL,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Figure.js","names":["styled","Figure","figure","p","theme","borderRadius","displayName"],"sources":["../../../../src/Editor/blocks/Figure.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nconst Figure = styled.figure`\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n`;\n\nFigure.displayName = 'Figure';\n\nexport default Figure;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"Figure.js","names":["styled","Figure","figure","p","theme","borderRadius","displayName"],"sources":["../../../../src/Editor/blocks/Figure.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nconst Figure = styled.figure`\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n`;\n\nFigure.displayName = 'Figure';\n\nexport default Figure;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,MAAMC,MAAM,GAAGD,MAAM,CAACE,MAAO;AAC7B,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,YAAa;AAC/C;AACA,CAAC;AAEDJ,MAAM,CAACK,WAAW,GAAG,QAAQ;AAE7B,eAAeL,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FigureCaption.js","names":["styled","clr","FigureCaption","figcaption","p","theme","sizes","small","editorFigureCaptionColorBg","editorFigureCaptionColorText","displayName"],"sources":["../../../../src/Editor/blocks/FigureCaption.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nconst FigureCaption = styled.figcaption`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding: 0.4em 0.8em;\n\n background-color: ${(p) => clr(p.theme.editorFigureCaptionColorBg)};\n color: ${(p) => clr(p.theme.editorFigureCaptionColorText)};\n\n & > div {\n text-align: center !important;\n margin: 0 !important;\n }\n`;\n\nFigureCaption.displayName = 'FigureCaption';\n\nexport default FigureCaption;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"FigureCaption.js","names":["styled","clr","FigureCaption","figcaption","p","theme","sizes","small","editorFigureCaptionColorBg","editorFigureCaptionColorText","displayName"],"sources":["../../../../src/Editor/blocks/FigureCaption.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nconst FigureCaption = styled.figcaption`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding: 0.4em 0.8em;\n\n background-color: ${(p) => clr(p.theme.editorFigureCaptionColorBg)};\n color: ${(p) => clr(p.theme.editorFigureCaptionColorText)};\n\n & > div {\n text-align: center !important;\n margin: 0 !important;\n }\n`;\n\nFigureCaption.displayName = 'FigureCaption';\n\nexport default FigureCaption;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AAExC,MAAMC,aAAa,GAAGF,MAAM,CAACG,UAAW;AACxC,eAAgBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAM;AAC1C;AACA;AACA,sBAAuBH,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACG,0BAA0B,CAAE;AACrE,WAAYJ,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACI,4BAA4B,CAAE;AAC5D;AACA;AACA;AACA;AACA;AACA,CAAC;AAEDP,aAAa,CAACQ,WAAW,GAAG,eAAe;AAE3C,eAAeR,aAAa"}
|
|
@@ -9,11 +9,9 @@ import FigureCaption from './FigureCaption';
|
|
|
9
9
|
import changeBlock from '../utils/changeBlock';
|
|
10
10
|
import getCurrentBlock from '../utils/getCurrentBlock';
|
|
11
11
|
import Figure from './Figure';
|
|
12
|
-
|
|
13
12
|
const widthStyles = p => p.width && css`
|
|
14
13
|
width: ${p.width}px;
|
|
15
14
|
`;
|
|
16
|
-
|
|
17
15
|
const ImageFigure = styled(Figure, omitEmotionProps('width'))`
|
|
18
16
|
position: relative;
|
|
19
17
|
display: inline-block;
|
|
@@ -47,15 +45,15 @@ const Image = styled.img`
|
|
|
47
45
|
max-height: ${p => p.theme.editorBlockImageMaxHeight}em;
|
|
48
46
|
vertical-align: bottom;
|
|
49
47
|
`;
|
|
50
|
-
|
|
51
48
|
const ImageBlock = props => {
|
|
52
49
|
const {
|
|
53
50
|
block
|
|
54
51
|
} = props;
|
|
55
52
|
const data = block.getData();
|
|
56
53
|
const src = data.get('src');
|
|
57
|
-
const loading = data.get('loading');
|
|
54
|
+
const loading = data.get('loading');
|
|
58
55
|
|
|
56
|
+
// Update the width of the image
|
|
59
57
|
const imageRef = useRef(null);
|
|
60
58
|
const [width, setWidth] = useState(0);
|
|
61
59
|
const updateWidth = useCallback(() => {
|
|
@@ -73,9 +71,7 @@ const ImageBlock = props => {
|
|
|
73
71
|
ref: imageRef
|
|
74
72
|
}), !loading && /*#__PURE__*/React.createElement(FigureCaption, null, /*#__PURE__*/React.createElement(EditorBlock, props)));
|
|
75
73
|
};
|
|
76
|
-
|
|
77
74
|
export const IMAGE_BLOCK = 'atomic:image';
|
|
78
|
-
|
|
79
75
|
const imageBlock = onImageUpload => ({
|
|
80
76
|
type: IMAGE_BLOCK,
|
|
81
77
|
component: ImageBlock,
|
|
@@ -85,13 +81,13 @@ const imageBlock = onImageUpload => ({
|
|
|
85
81
|
onChange,
|
|
86
82
|
setReadOnly
|
|
87
83
|
}) => {
|
|
88
|
-
if (!onImageUpload) throw new Error('Specify the onImageUpload method');
|
|
89
|
-
// The input must be actually appended to the DOM.
|
|
84
|
+
if (!onImageUpload) throw new Error('Specify the onImageUpload method');
|
|
90
85
|
|
|
86
|
+
// Not working in mobile Safari.
|
|
87
|
+
// The input must be actually appended to the DOM.
|
|
91
88
|
const input = document.createElement('input');
|
|
92
89
|
input.type = 'file';
|
|
93
90
|
input.accept = 'image/jpeg,image/png,image/webp';
|
|
94
|
-
|
|
95
91
|
input.onchange = async e => {
|
|
96
92
|
const target = e.target;
|
|
97
93
|
if (!target) return;
|
|
@@ -101,15 +97,17 @@ const imageBlock = onImageUpload => ({
|
|
|
101
97
|
if (!files) return;
|
|
102
98
|
setReadOnly(true);
|
|
103
99
|
const file = files[0];
|
|
104
|
-
let src = URL.createObjectURL(file);
|
|
100
|
+
let src = URL.createObjectURL(file);
|
|
105
101
|
|
|
102
|
+
// Add the local image
|
|
106
103
|
const currentBlock = getCurrentBlock(value);
|
|
107
104
|
let nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {
|
|
108
105
|
src,
|
|
109
106
|
loading: true
|
|
110
107
|
});
|
|
111
|
-
onChange(nextEditorState);
|
|
108
|
+
onChange(nextEditorState);
|
|
112
109
|
|
|
110
|
+
// Replace the local image with the remote one
|
|
113
111
|
try {
|
|
114
112
|
src = await onImageUpload(file);
|
|
115
113
|
nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {
|
|
@@ -119,17 +117,13 @@ const imageBlock = onImageUpload => ({
|
|
|
119
117
|
if (err instanceof Error) {
|
|
120
118
|
message.error(err.message);
|
|
121
119
|
}
|
|
122
|
-
|
|
123
120
|
nextEditorState = changeBlock(value, currentBlock, 'unstyled');
|
|
124
121
|
}
|
|
125
|
-
|
|
126
122
|
setReadOnly(false);
|
|
127
123
|
onChange(nextEditorState);
|
|
128
124
|
};
|
|
129
|
-
|
|
130
125
|
input.click();
|
|
131
126
|
}
|
|
132
127
|
});
|
|
133
|
-
|
|
134
128
|
export default imageBlock;
|
|
135
129
|
//# sourceMappingURL=imageBlock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imageBlock.js","names":["React","useCallback","useRef","useState","styled","EditorBlock","Loading","Picture","message","omitEmotionProps","useEvent","css","FigureCaption","changeBlock","getCurrentBlock","Figure","widthStyles","p","width","ImageFigure","Mask","div","theme","editorBlockImageMaskOpacity","LoadingIcon","editorBlockImageLoadingFontSize","Image","img","editorBlockImageMaxHeight","ImageBlock","props","block","data","getData","src","get","loading","imageRef","setWidth","updateWidth","current","window","undefined","startsWith","getText","IMAGE_BLOCK","imageBlock","onImageUpload","type","component","icon","onClick","value","onChange","setReadOnly","Error","input","document","createElement","accept","onchange","e","target","files","file","URL","createObjectURL","currentBlock","nextEditorState","err","error","click"],"sources":["../../../../src/Editor/blocks/imageBlock.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { EditorBlock } from 'draft-js';\nimport { Loading, Picture } from '@os-design/icons';\nimport { message } from '@os-design/core';\nimport { omitEmotionProps, useEvent } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport FigureCaption from './FigureCaption';\nimport changeBlock from '../utils/changeBlock';\nimport getCurrentBlock from '../utils/getCurrentBlock';\nimport Figure from './Figure';\nimport { BlockProps, BlockToolbarItem } from './types';\n\nconst widthStyles = (p) =>\n p.width &&\n css`\n width: ${p.width}px;\n `;\n\ninterface ImageFigureProps {\n width: number;\n}\nconst ImageFigure = styled(Figure, omitEmotionProps('width'))<ImageFigureProps>`\n position: relative;\n display: inline-block;\n max-width: 100%;\n ${widthStyles};\n`;\n\nconst Mask = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: hsla(\n 0,\n 0%,\n 0%,\n ${(p) => p.theme.editorBlockImageMaskOpacity}\n );\n color: hsl(0, 0%, 100%);\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: ${(p) => p.theme.editorBlockImageLoadingFontSize}em;\n`;\n\nconst Image = styled.img`\n max-width: 100%;\n max-height: ${(p) => p.theme.editorBlockImageMaxHeight}em;\n vertical-align: bottom;\n`;\n\nconst ImageBlock: React.FC<BlockProps> = (props) => {\n const { block } = props;\n const data = block.getData();\n const src = data.get('src') as string;\n const loading = data.get('loading') as boolean;\n\n // Update the width of the image\n const imageRef = useRef<HTMLImageElement>(null);\n const [width, setWidth] = useState(0);\n const updateWidth = useCallback(() => {\n if (!imageRef.current) return;\n setWidth(imageRef.current.width);\n }, []);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n updateWidth\n );\n\n if (!src) return null;\n\n return (\n <ImageFigure width={width}>\n {loading && (\n <Mask>\n <LoadingIcon />\n </Mask>\n )}\n <Image\n src={src.startsWith('blob:') ? src : `${src}-1024`}\n alt={block.getText()}\n onLoad={updateWidth}\n ref={imageRef}\n />\n {!loading && (\n <FigureCaption>\n <EditorBlock {...props} />\n </FigureCaption>\n )}\n </ImageFigure>\n );\n};\n\nexport const IMAGE_BLOCK = 'atomic:image';\n\nconst imageBlock = (\n onImageUpload: (file: File) => Promise<string>\n): BlockToolbarItem => ({\n type: IMAGE_BLOCK,\n component: ImageBlock,\n icon: <Picture />,\n onClick: ({ value, onChange, setReadOnly }) => {\n if (!onImageUpload) throw new Error('Specify the onImageUpload method');\n\n // Not working in mobile Safari.\n // The input must be actually appended to the DOM.\n const input = document.createElement('input');\n input.type = 'file';\n input.accept = 'image/jpeg,image/png,image/webp';\n input.onchange = async (e) => {\n const target = e.target as HTMLInputElement | null;\n if (!target) return;\n const { files } = target;\n if (!files) return;\n\n setReadOnly(true);\n const file = files[0];\n let src = URL.createObjectURL(file);\n\n // Add the local image\n const currentBlock = getCurrentBlock(value);\n let nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {\n src,\n loading: true,\n });\n onChange(nextEditorState);\n\n // Replace the local image with the remote one\n try {\n src = await onImageUpload(file);\n nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {\n src,\n });\n } catch (err) {\n if (err instanceof Error) {\n message.error(err.message);\n }\n nextEditorState = changeBlock(value, currentBlock, 'unstyled');\n }\n\n setReadOnly(false);\n onChange(nextEditorState);\n };\n input.click();\n },\n});\n\nexport default imageBlock;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"imageBlock.js","names":["React","useCallback","useRef","useState","styled","EditorBlock","Loading","Picture","message","omitEmotionProps","useEvent","css","FigureCaption","changeBlock","getCurrentBlock","Figure","widthStyles","p","width","ImageFigure","Mask","div","theme","editorBlockImageMaskOpacity","LoadingIcon","editorBlockImageLoadingFontSize","Image","img","editorBlockImageMaxHeight","ImageBlock","props","block","data","getData","src","get","loading","imageRef","setWidth","updateWidth","current","window","undefined","startsWith","getText","IMAGE_BLOCK","imageBlock","onImageUpload","type","component","icon","onClick","value","onChange","setReadOnly","Error","input","document","createElement","accept","onchange","e","target","files","file","URL","createObjectURL","currentBlock","nextEditorState","err","error","click"],"sources":["../../../../src/Editor/blocks/imageBlock.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { EditorBlock } from 'draft-js';\nimport { Loading, Picture } from '@os-design/icons';\nimport { message } from '@os-design/core';\nimport { omitEmotionProps, useEvent } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport FigureCaption from './FigureCaption';\nimport changeBlock from '../utils/changeBlock';\nimport getCurrentBlock from '../utils/getCurrentBlock';\nimport Figure from './Figure';\nimport { BlockProps, BlockToolbarItem } from './types';\n\nconst widthStyles = (p) =>\n p.width &&\n css`\n width: ${p.width}px;\n `;\n\ninterface ImageFigureProps {\n width: number;\n}\nconst ImageFigure = styled(Figure, omitEmotionProps('width'))<ImageFigureProps>`\n position: relative;\n display: inline-block;\n max-width: 100%;\n ${widthStyles};\n`;\n\nconst Mask = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: hsla(\n 0,\n 0%,\n 0%,\n ${(p) => p.theme.editorBlockImageMaskOpacity}\n );\n color: hsl(0, 0%, 100%);\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: ${(p) => p.theme.editorBlockImageLoadingFontSize}em;\n`;\n\nconst Image = styled.img`\n max-width: 100%;\n max-height: ${(p) => p.theme.editorBlockImageMaxHeight}em;\n vertical-align: bottom;\n`;\n\nconst ImageBlock: React.FC<BlockProps> = (props) => {\n const { block } = props;\n const data = block.getData();\n const src = data.get('src') as string;\n const loading = data.get('loading') as boolean;\n\n // Update the width of the image\n const imageRef = useRef<HTMLImageElement>(null);\n const [width, setWidth] = useState(0);\n const updateWidth = useCallback(() => {\n if (!imageRef.current) return;\n setWidth(imageRef.current.width);\n }, []);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n updateWidth\n );\n\n if (!src) return null;\n\n return (\n <ImageFigure width={width}>\n {loading && (\n <Mask>\n <LoadingIcon />\n </Mask>\n )}\n <Image\n src={src.startsWith('blob:') ? src : `${src}-1024`}\n alt={block.getText()}\n onLoad={updateWidth}\n ref={imageRef}\n />\n {!loading && (\n <FigureCaption>\n <EditorBlock {...props} />\n </FigureCaption>\n )}\n </ImageFigure>\n );\n};\n\nexport const IMAGE_BLOCK = 'atomic:image';\n\nconst imageBlock = (\n onImageUpload: (file: File) => Promise<string>\n): BlockToolbarItem => ({\n type: IMAGE_BLOCK,\n component: ImageBlock,\n icon: <Picture />,\n onClick: ({ value, onChange, setReadOnly }) => {\n if (!onImageUpload) throw new Error('Specify the onImageUpload method');\n\n // Not working in mobile Safari.\n // The input must be actually appended to the DOM.\n const input = document.createElement('input');\n input.type = 'file';\n input.accept = 'image/jpeg,image/png,image/webp';\n input.onchange = async (e) => {\n const target = e.target as HTMLInputElement | null;\n if (!target) return;\n const { files } = target;\n if (!files) return;\n\n setReadOnly(true);\n const file = files[0];\n let src = URL.createObjectURL(file);\n\n // Add the local image\n const currentBlock = getCurrentBlock(value);\n let nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {\n src,\n loading: true,\n });\n onChange(nextEditorState);\n\n // Replace the local image with the remote one\n try {\n src = await onImageUpload(file);\n nextEditorState = changeBlock(value, currentBlock, IMAGE_BLOCK, {\n src,\n });\n } catch (err) {\n if (err instanceof Error) {\n message.error(err.message);\n }\n nextEditorState = changeBlock(value, currentBlock, 'unstyled');\n }\n\n setReadOnly(false);\n onChange(nextEditorState);\n };\n input.click();\n },\n});\n\nexport default imageBlock;\n"],"mappings":"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"}
|